動画を追加する方法
この記事では、Web サイトにビデオを含めるためのあらゆる方法を学びます。
YouTubeやVimeoの動画を埋め込む方法
Section titled “YouTubeやVimeoの動画を埋め込む方法”YouTube や Vimeo などのプラットフォームを介して動画を埋め込むことをお勧めします。これらのプラットフォームは動画を埋め込むように設定されており、動画がそれに応じて最適化されているためです。また、ウェブサイトの訪問者は読み込み時間が短縮されるというメリットがあります。
エディターを使えば、YouTubeやVimeoの動画を簡単に追加できます。どちらも同じように統合されているので、YouTube動画を使って例を挙げて説明します。YouTube動画を埋め込む最も簡単な方法は、動画のURLをコピーして YouTube要素 に貼り付けることです（Vimeo動画の場合は Vimeo要素 を使用してください）。
最初に コンテナ要素 を追加することを強くお勧めします。これにより、コンテナ (およびビデオ) の幅や高さなどを調整できるようになります。
コンテナを追加するには、左側のサイドバーの 「要素」 カテゴリをクリックし、 コンテナ要素 をWeb サイトにドラッグ アンド ドロップします。
次に、左側のサイドバーの 「要素」 カテゴリに戻り、 YouTube 要素を コンテナ要素にドラッグ アンド ドロップします。
YouTube要素 を追加すると、ウェブサイトにダミー動画が表示されます。ここに動画を表示するには、左側の設定パネルの YouTube URL フィールドのリンクを置き換えてください。
設定パネルには、この要素に関する他のオプションも表示されます。
- アスペクト比: ビデオのアスペクト比を調整します。
- 遅延読み込み: この設定は、ビデオを事前に読み込むか、再生ボタンを押した後にのみ読み込むかを決定します。
- コントロールを表示: 再生ボタン、音量コントロールなどを有効または無効にします。
- 関連動画を表示: 有効にすると、動画の終了後に YouTube からのおすすめ動画のリストが表示されます。
ビデオファイルを直接埋め込む
Section titled “ビデオファイルを直接埋め込む”独自のビデオを直接アップロードしたり、Pexels 統合からストックビデオを選択して Web サイトに表示したりすることもできます。
これを行うには、左側のサイドバーの 「要素」 カテゴリをクリックし、 コンテナ要素 をWeb サイトにドラッグ アンド ドロップします。
次に、左側のサイドバーの 「要素」 カテゴリに戻り、 ビデオ要素 を コンテナー要素 にドラッグ アンド ドロップします。
ビデオ要素 を追加したので、左側の設定パネルのアップロード フィールドで、[ファイル] または無料のストック写真・動画からファイルを選択 をクリックして、独自のビデオをアップロードするか、 ストック動画から動画 を選択できます。
必要に応じて、ビデオの再生前に表示されるプレビュー画像をアップロードすることもできます。
「動作」 の下には、調整可能なさまざまな設定もあります。
- 自動再生: これにより、ビデオが自動的に開始されます
- ビデオをミュート: ビデオの音声をミュートします
- ループビデオ: ビデオを何度も繰り返し再生します
- コントロールを表示: 再生ボタン、音量コントロールなどを有効または無効にします。
バックグラウンドのビデオ
Section titled “バックグラウンドのビデオ”動画を前面に出すのではなく、背景として追加したいですか? 問題ありません!
コンテナ要素 には 「背景」 オプションがあります。ここで、以下のいずれかを選択できます。
- なし: 背景なし
- 色/グラデーション: ここでは、特定の色またはグラデーションを設定できます。
- 要素: ここでは、画像、マップ、ビデオ、HTML など、背景として使用できるさまざまな要素を選択できます。
「要素」>「動画」 （または動画をリンクしたい場合は YouTube または Vimeo ）をクリックすると、左側のパネルに動画設定が表示されます。ご自身の動画をアップロードするか、「ファイル」にあるストック動画ライブラリから動画を選択し、プレビュー画像を追加して、その他の動画設定を管理してください。
カラーオーバーレイを追加することもできます。たとえば、暗いオーバーレイを選択すると、ビデオの上に表示されるテキストが読みやすくなります。
動画の上に 図形の区切り線 を追加することもできます。 「コンテナ」 タブに移動し、 「シェイプディバイダー」 セクションまでスクロールして、お好みのデザインを選択してください。色、幅、高さなどを変更してカスタマイズできます。
