ページにビデオを追加する方法

動画を埋め込めるブロックのほとんどは、Tilda のブロックライブラリの「動画」カテゴリーにあります。

ウェブサイトにビデオを追加するには、いくつかのオプションがあります：YouTubeやVimeoビデオの追加、Kinescope、サードパーティ・サーバー上のビデオへの直接リンクを追加するオプション（HTML5ビデオ）、そしてiFrameを使用してビデオを追加する方法です。

VD01（1つの動画）、VD04（再生ボタンをクリックした後に動画を表示）、VD06N（2つの動画）、VD08（動画とテキスト）、VD09（ポップアップ動画）、VD11（カスタムカバー付き動画）、VD12（動画と画像を一列に表示）、VD13（ライブチャット付きYouTubeライブストリーム）ブロックを使用してYouTube動画を追加できます、VD14 (動画プレイリスト)、VD16 (動画ウィジェット)、AB701 (タイトル、説明、動画)、BF402N (動画または画像とフォームを 2 列に並べたもの)、いくつかのギャラリー ブロック、およびフルスクリーン画像を背景にしたブロック(動画を背景に追加する方法については、こちらをご覧ください)。

動画を追加するには、一般に公開され、プライバシー設定でサードパーティのウェブサイトへの埋め込みが有効になっている動画へのリンクが必要です。

最も気に入ったブロックを選択し、その「コンテンツ」タブに移動して、動画へのリンクを挿入します。

動画を特定の瞬間から再生させたい場合は、URLに?start=フラグメントを追加し、動画の開始から必要な時間を秒単位で指定します。たとえば、XEfDYMngJeE?start=5025のようにします。この場合、ビデオは5025秒目から再生されます。プレーヤーを右クリックし、「Copy video URL at current time」オプションを選択すると、時間をすばやくコピーできます。

VD01（1つの動画）、VD04（再生ボタンをクリックした後に動画を表示）、VD06N（2つの動画）、VD08（動画とテキスト）、VD09（ポップアップ動画）、VD11（カスタムカバー付き動画）ブロックを使用して、Vimeoの動画を追加できます、VD12 (動画と画像を 1 列に並べたもの)、VD14 (動画プレイリスト)、VD16 (動画ウィジェット)、AB701 (タイトル、説明、動画)、BF402N (動画または画像とフォームを 2 列に並べたもの)、いくつかのギャラリー ブロック、およびフルスクリーン画像を背景にしたブロック。

動画がVimeoのプライバシー設定によってロックされている場合、動画IDの後に数字と文字の組み合わせがリンクの最後に追加されます。動画を再生するには、この組み合わせを Vimeo プライベートリンクハッシュフィールドに追加します。

動画が上記の動画ホスティングサービスで公開されていない場合は、ご自身のサーバーに動画をアップロードし、以下のHTML5動画ブロックを使用して挿入することができます：VD01（1 つの動画）、VD04（再生ボタンをクリックした後に動画を表示）、VD08（動画とテキスト）、VD09（ポップアップ動画）、VD11（カスタム カバー付き動画）、VD12（動画と画像を 1 列に並べたもの）、VD16（動画ウィジェット）、AB701（タイトル、説明、動画）、BF402N（動画または画像とフォームを 2 列に並べたもの）、およびいくつかのギャラリー ブロックを使用します。また、フルスクリーン背景のブロックを使用して、HTML5 動画を Web サイトの背景として追加することもできます（動画を背景に追加する方法の詳細）。

このような動画をページに追加するには、WebM および MP4 動画ファイルを使用する必要があります。オンラインコンバータや動画編集・変換ソフトを使って、動画をこれらの形式に変換することができます。そして、それをホスティングに配置し、ファイルへの直接リンクを取得します。すべてのファイルストレージサービスにこのような機能があるわけではないので、有料のファイルホスティングサービスを利用する必要がある可能性が高いことに注意してください。

HTML5動画ブロックの「コンテンツ」タブに移動し、必須フィールドに両方の形式の動画へのリンクを追加します。

HTML5 動画ブロックにファイルへの直接リンクを追加するには、ファイル ストレージ サービスにファイルをアップロードする必要があります。Google Drive や Dropbox などのクラウド ストレージ オプションは、ファイルへの直接リンクを提供しないため、この作業には適していません。

この作業には、ファイル ストレージ サービスを提供するサービスまたはホスティング プロバイダを使用する必要があります。Selectelを例にして、ファイルをアップロードし、そのファイルへの直接リンクを取得する方法を見てみましょう。

ブロックVD01 (1つの動画)、VD04 (再生ボタンをクリックした後に動画を表示)、VD08 (動画とテキスト)、VD09 (ポップアップ動画)、VD11 (カスタムカバー付き動画)、VD12 (動画と画像を一列に)、VD14 (動画プレイリスト)、AB701 (タイトル、説明、動画)、BF402N (動画または画像とフォームを2列に)、またフルスクリーン画像を背景にしたブロックもあります。

Kinescopeを使い始めるには、https://www.kinescope.com/ウェブサイトにサインアップするか、アカウントにサインインする必要があります。

Kinescopeにビデオをアップロードするには、右上隅の新規ボタンをクリックし、「ファイルをアップロード」を選択してビデオを追加します。

ウェブサイトにビデオを追加するには、カタログのビデオの近くにある3つの点のボタンをクリック → リンクをコピー →Tilda のブロックのコンテンツタブにリンクを貼り付けます。

VD01 (1 つの動画)、VD04 (再生ボタンをクリックした後に動画を表示)、VD08 (動画とテキスト)、VD09 (ポップアップ動画)、VD11 (カスタム カバー付き動画)、VD12 (動画と画像を 1 列に並べる)、VD14 (動画プレイリスト)、AB701 (タイトル、説明、動画)、BF402N (動画または画像とフォームを 2 列に並べる) のブロックを使用して、iFrame で動画を追加できます。

このオプションを使用すると、Web サイトに動画を埋め込むための iframe コードを提供するあらゆるプラットフォームから動画を追加できます。

このオプションでは、「動画の自動再生」と「サウンドをミュートした動画」の設定は機能しません。動画をホストするプラットフォームがこれを許可している場合は、リンクに自動再生とミュートのパラメータを挿入できます。

静的な背景画像ではなく、画像を背景にした表紙などのブロックに動画を使用することができます。コンテンツ]タブに移動し、必須フィールドに動画へのリンクを貼り付けます。YouTubeの動画リンク、または上記のガイドを使用して取得したHTML5動画リンクを使用できます。

プレイリストブロックは「ビデオ」カテゴリー → VD14ブロックにあります。

このブロックは、YouTube、Vimeo、Kinescopeサービスのビデオをサポートしています。動画を追加するには、次の形式でデータを指定する必要があります：
動画へのリンク; 動画のタイトル; 動画の時間; 動画の説明

プレイリスト内の各動画の簡単な要約は、新しい行から指定する必要があります。

ビデオウィジェットは、画面の隅に小さなビデオを表示し、製品やサービスのストーリーを共有するのに役立ちます。プレビューは音なしで再生され、クリックすると音付きのメインビデオが読み込まれます。

ビデオウィジェットを追加するには、ビデオカテゴリに移動し、VD16ブロックを選択します。

動画を追加する前に、ウェブ用に動画を準備し最適化する必要があります（専用のソフトウェアまたはVeed.ioなどのオンラインエディタを使用）。

その後、動画ストレージを提供するサービスにファイルをアップロードし、直接リンクを使ってアクセスします。

ブロックの「コンテンツ」タブに移動し、メイン動画へのリンクを貼り付けます。

オプションでプレビュー動画バージョンを追加することができます。これは、ユーザーがメインのビデオを紹介するのに役立ち、ウェブサイトの読み込み時間を短縮することができます。
最適なビデオサイズは、幅200px、5秒以内です。

訪問者に何らかのアクションを促すことが目的であれば、メイン動画上のボタンにもリンクとテキストを指定できます。ボタンが不要な場合は、空欄のままにしておいてください。

ブロック設定では、ウィジェット、開くメインビデオ、ボタンのパラメータを調整できます。ウィジェットについては、アスペクト比、ボーダーの幅とパラメータ、画面上の位置などを指定できます。メインビデオでは、ボーダー、影、再生ボタンのパラメータを設定できます。動画の幅は常に固定されます-横長の動画の場合は560x315、逆に縦長の動画の場合は315x560です。

Zero Block でビデオを追加するには → (+)ボタンをクリックし、ビデオ要素を追加 → ビデオを追加するために利用可能なオプションのいずれかを選択します：YouTube、Vimeo、MP4、Kinescope → 動画へのリンクまたはIDを貼り付ける。

他のサービスの動画を追加するには、HTMLコードの埋め込みオプションを使用することができます：HTML要素を追加 → 設定パネルの「コードを編集」ボタンをクリック → プレーヤーを埋め込むコードを指定します。下記↓にコードの取得方法の例があります。

商品カタログでは、商品を紹介するビデオを追加することができます。これを行うには、商品カードに移動 → 任意の商品画像の近くにある「ビデオ」リンクをクリックし、YouTube、Vimeo、KinescopeのビデオまたはそのIDへのリンクを挿入します。

メインの動画を追加するには、フィードの投稿編集カード→「動画」タブの画像のあるフィールドに行き、動画へのリンクを貼り付けます。

ビデオは投稿の冒頭に表示されます。

投稿文中に動画を追加するには、左のプラスアイコンをクリック→動画ブロックを追加→クリックして動画へのリンクを指定します。

ブロックの左にある3つの点をクリックすると、ビデオを変更できる。

投稿のテキストに動画が挿入されます。変更を保存します。

その後、動画は投稿ページのテキスト内に表示される。

HTMLコードブロックにプレーヤーのコードを埋め込むことで、動画を追加できます。これを行うには、プレーヤーまたはサービスの設定に移動して、埋め込み用のコードを取得します。

Kinescopeの場合、リストのビデオの近くにある3つの点のボタンをクリック → 埋め込む → 画面サイズに合わせてプレーヤーを調整する必要がある場合はレスポンシブ・コード、小さなプレーヤーを追加する場合は固定コードを選択し、コピーしたコードでそのサイズと位置を指定 → 「その他」カテゴリからT123ブロック、またはZero Block のHTML要素に受け取ったコードを貼り付けます。