Webサイトにビデオウィジェットを埋め込むためのHTMLタグを生成する方法を学びます。
Web サイトにビデオコンテンツを追加する準備ができたら、簡単にコピーして貼り付けることができるHTMLコードタグを生成します。ページ上のコンテンツを配置する場所を特定し、選択したコンテンツブロックにコードを貼り付けます。
Shopify を使用してビデオを埋め込みたいですか?こちらの手順をご覧ください。
Webページにビデオを埋め込むには:
- 管理画面で、追加するプレイリストをクリックします
- ページの右上隅にある「サイトに追加」ボタンをクリックします。
- プレイリストのレイアウトを選択します。 5 つの異なるプレイリストレイアウトから選択できます。
- 「コードをコピー」ボタンをクリックします。
- HTMLコードを貼り付けてWebページに埋め込みます。
5 レイアウトの選択
ストーリーブロック、グリッド、カルーセルは、Webサイトの本文に組み込むように設計されています。これらはページの静的な部分であり、訪問者がスクロールして通り過ぎることができます。ストーリーブロックのカスタマイズについて詳しくは、こちらをご覧ください。
ユーザーがWebページの閲覧を続けている間、グリッドとカルーセルはピクチャイン ピクチャモードで再生し続けることができます。
フローティングプレーヤーは通常、Webサイトのヘッダーまたは本文にプラグインされます。他のコンテンツの上に浮かび上がり、訪問者と一緒に画面の隅でスクロールしながら再生を続けます。
ストーリーブロック: これは静的なコンテンツブロックです。Web ページの一部に 1 つのビデオが表示され、スクロールして通り過ぎることができます。 1 つのビデオが完了すると、プレイリスト内の次のビデオが再生されます。コード行を追加して、背景を透明にカスタマイズします。
フローティングプレーヤー: これはページの右下隅にある小さなビデオ画面で、ユーザーがスクロールするとページとともにフローティングします。 Web ページの他の場所をクリックすると、プレイリストビデオがピクチャインピクチャ ビューに戻ります。
グリッド: ビデオをクリックしてプレーヤーを拡大し、ユーザーがプレイリスト内のビデオを左右にスクロールできるようにします。最小化すると、ビデオプレーヤーは画面の隅に浮かび上がります。ビデオをどのコーナーにフローティングするかを選択できます。
カルーセル: ビデオを選択すると、ビデオプレーヤーが拡大されます。最小化すると、ビデオプレーヤーは画面の隅に浮き上がります。ビデオをどのコーナーにフローティングするかを選択できます。
カルーセルのサイズ調整：小型カルーセルの場合はsize="small"、中型カルーセルの場合はsize="medium"という属性をHTMLコードに直接組み込むことで、カルーセルのサイズを小型または中型に調整することができます。
<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>
<fw-embed-feed
channel="firework_depot"
playlist="oe8bX5"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
attribute size ="small"
player_placement="bottom-right"
></fw-embed-feed>
拡大CTA： カルーサルまたはグリッドレイアウトオプションをオーバーレイオプションで利用する場合、自動再生中されているビデオ上に表示されます。
ヒーローユニット: ※ライブ配信を含むプレイリストにのみ適用されます。ヒーロー ユニットは全画面表示で、画面の左側にストーリー ブロックが表示され、右側にテキストが表示されます。このライブ配信固有のレイアウトの詳細については、「ヒーローユニットを有効にする」を参照してください。
