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

ページに動画ブロックを追加するには、ブロックライブラリを開き、「動画」カテゴリに移動してください。

Tildaアップロードするには、「動画」カテゴリの任意のブロックにある「コンテンツ」をクリックし、「動画ソース」フィールドでMP4またはWEBMを選択してください。その後、ファイルアップロードアイコンをクリックします。MP4またはWEBM形式の動画であれば、最大5MBまでアップロード可能です。

YouTube動画を追加するには、ブロックVD01（動画）、VD04（「再生」ボタン）、VD06N（複数列の動画）、VD08（2列のテキストと動画）、VD09（ポップアップ動画）、VD11（カスタムカバー付き動画）、VD12（1行の動画と画像）、 VD13（ライブチャット付きYouTubeライブ配信）、VD14（動画コースプレイリスト）、VD16（動画ウィジェット）、AB701（タイトル、説明、動画）、BF402N（2列配置の動画または画像とフォーム）、一部のギャラリーブロック、および背景に全画面画像を使用したブロック（背景として動画を追加する方法の詳細はこちら）を使用してYouTube動画を追加できます。

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

お好みのブロックを選択し、「コンテンツ」タブに移動して、動画へのリンクを挿入してください。

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

Vimeoの動画を追加するには、ブロックVD01（動画）、VD04（「再生」ボタン）、VD06N（複数列の動画）、VD08（2列のテキストと動画）、 VD09（ポップアップ動画）、VD11（カスタムカバー付き動画）、VD12（1行に動画と画像）、VD14（動画コースプレイリスト）、AB701（タイトル、説明、動画）、BF402N（2列に動画または画像とフォーム）、一部のギャラリーブロック、および背景に全画面画像を使用したブロックを使用して、Vimeo動画を追加できます。

Vimeoのプライバシー設定により動画がロックされている場合、リンクの末尾（動画IDの直後）に数字と文字の組み合わせ（?h=ハッシュパラメータ）が追加されます。動画を再生するには、この組み合わせを「Vimeoプライベートリンクハッシュ」フィールドに入力してください。

動画をサーバーにアップロードし、HTML5ビデオ対応のブロックに挿入することができます。対象となるブロックは、VD01（ビデオ）、VD04（「再生」ボタン）、VD08（2列配置のテキストとビデオ）、VD09（ポップアップビデオ）、VD11（カスタムカバー付きビデオ）、VD12（1行配置のビデオと画像）、 VD16（動画ウィジェット）、AB701（タイトル、説明、動画）、BF402N（2列配置の動画または画像とフォーム）、一部のギャラリーブロック、および背景に全画面画像を使用するブロック（背景として動画を追加する方法の詳細はこちら）です。

ページにこのような動画を追加するには、WebMおよびMP4形式の動画ファイルを使用する必要があります。 オンラインコンバーターや動画編集・変換ソフトを使用して、動画をこれらの形式に変換できます。

その後、ホスティングサービスにアップロードし、ファイルへの直接リンクを取得してください。すべてのファイルストレージサービスにこの機能があるわけではないため、有料のファイルホスティングサービスを利用する必要がある可能性が高いことに注意してください。

ファイルへのリンクを取得したら、HTML5ビデオが埋め込まれたブロックの「コンテンツ」に移動し、両方の形式の動画へのリンクを所定の欄に入力してください。

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

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

Kinescopeの動画は、ブロックVD01（動画）、VD04（「再生」ボタン）、VD08（2列配置のテキストと動画）、VD09（ポップアップ動画）、VD11（カスタムカバー付き動画）、VD12（1行配置の動画と画像）、VD14（動画コースのプレイリスト）、 AB701（タイトル、説明、動画）、BF402N（2列配置の動画または画像とフォーム）、および背景に全画面画像を使用する一部のブロックを使用して、Kinescopeの動画を追加できます。

Kinescopeの利用を開始するには、https://www.kinescope.com/のウェブサイトに登録するか、アカウントにログインする必要があります。

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

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

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

このオプションを使用すると、ウェブサイトへの動画埋め込み用にiFrameコードを提供しているあらゆるプラットフォームから動画を追加できます。

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

静止画の背景画像の代わりに、動画や画像を背景としてカバーやその他のブロックに使用できます。「コンテンツ」タブに移動し、指定された欄に動画のリンクを貼り付けてください。Tildaに動画をアップロードするか、YouTubeの動画リンク、または上記のガイドに従って作成したHTML5動画リンクを使用できます。

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

このブロックは、YouTube、Vimeo、Kinescopeの各サービスからの動画をサポートしています。動画を追加するには、以下の形式でデータを指定する必要があります：
動画へのリンク；動画のタイトル；動画の長さ；動画の説明

プレイリスト内の各動画の簡単な概要は、改行して指定してください。

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

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

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

その後、Tilda 動画の保存・共有サービスを提供するサービスにアップロードし、直接リンクからアクセスできるようにしてください。サードパーティのサービスに動画をアップロードした場合は、Tildaそのファイルへの直接リンクを指定してください。

必要に応じて、プレビュー動画を追加することができます。これにより、ユーザーは本編の概要を把握しやすくなり、ウェブサイトの読み込み時間を短縮できます。
動画の最適なサイズは、幅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要素に受け取ったコードを貼り付けます。