ferret Oneでは、YouTubeで作られた動画をページに設置することができます。
事前に挿入したい動画を「Youtube」で用意している必要があります。
※動画サービス:YouTubeについて参照(外部ページへ遷移します)
目次
YouTube動画の設定方法
1.「動画パーツ」を任意の箇所に配置します。
※キャプチャはベースデザインなしの場合の画面になります
【ベースデザインあり・なしの画面比較】
パーツ / メディアパーツ |
単体パーツ / 埋め込み |
2. 設定したいYouTube動画のIDまたはURLを「動画のIDまたはURL」に入力し、取り込むボタンを押します。
※YouTube動画のID、またはURLは、YouTubeの共有ボタンから取得可能です。
3. 取り込むボタンをクリックすると、入力したID/URLの動画が表示されます。
■動画パーツの詳細設定はこちら
>【機能詳細】ページ編集(LP編集)/デザインパーツ 動画パーツ
YouTubeを自動再生/ループ再生したい場合
自動再生、ループ再生したい場合には、
「動画パーツ」ではなく「iframeパーツ」を使う必要があり、YouTubeのURLにautoplay=1などのパラメータを追加することで自動再生になります。
※iOSでは自動再生ができません。
詳細につきましては、YouTubeのヘルプページを参照ください。(外部ページへ遷移します)
https://developers.google.com/youtube/iframe_api_reference?hl=ja#Mobile_considerations
■iframeパーツについての詳細はこちら
>【機能詳細】ページ編集(LP編集)/デザインパーツ iframeパーツ
YouTubeからiframeタグを取得する
1. 貼り付けたいYouTubeのページを開きます
2. 共有ボタンをクリックし、「埋め込む」をクリックします
3. コピーをクリックします
必要に応じてオプションを選択ください
取得したiframeタグをferret Oneに設置する
1. テキストエディタに取得したURL貼り付け、URLにパラメータを追加します
追加する際はパラメータが既にあるか確認してください。
パラメータなしの場合、?をつけます:「?autoplay=1&mute=1」
例)https://www.youtube.com/embed/Xviwd67TeCo?autoplay=1&mute=1
パラメータありの場合、&をつけます:「&autoplay=1&mute=1」
例)https://www.youtube.com/embed/Xviwd67TeCo?start=5&autoplay=1&mute=1
2. iframeパーツに設定します
URLを入力し、「取り込む」ボタンをクリックします。そのほか、必要に応じて設定をお願いします。
テーマにより期待した表示がされない場合、テクニカルサポートへ連絡いただけますと必要に応じてサポートさせていただきます。
■iframeパーツについての詳細はこちら
>【機能詳細】ページ編集(LP編集)/デザインパーツ iframeパーツ
パラメータのパターン
各パラメータは組み合わせをすることが可能で、ここでは主な組み合わせを紹介しています。
▼自動再生の場合
autoplay=1&mute=1
※自動再生はautoplay=1ですが、音声OFFであるmute=1を付けないとスマートフォンで再生されません。
▼ループ再生の場合
loop=1&playlist=動画ID
▼自動再生かつループ再生の場合
autoplay=1&mute=1&loop=1&playlist=VIDEO_ID
▼スマートフォン時に全画面モードにしない場合
playsinline=1
▼関連動画をチャンネルのみに絞り込む場合
rel=0
また、そのほかパラメータをつけることで表示内容が変わります。詳細につきましては、YouTubeのヘルプページを参照ください。
https://developers.google.com/youtube/player_parameters
(※外部ページへ遷移します)
<iframe> タグを使用してプレーヤーを埋め込む アプリケーションに <iframe> タグを定義します。 このタグの中では、プレーヤーに読み込むコンテンツを src URL に指定した上で、必要な他のプレーヤー パラメータも追加します。 <iframe> タグの height パラメータと width パラメータで、プレーヤーのサイズを指定します。 <iframe> の要素を自分で作成する(IFrame Player API を使用しない)場合は、URL の末尾に直接、プレーヤーのパラメータを追加できます。 URL の形式は次のとおりです。 https://www.youtube.com/embed/VIDEO_ID 下の <iframe> タグでは、YouTube 動画 M7lc1UVf-VE を再生する 640x360 ピクセルのプレーヤーが読み込まれます。 URL の autoplay パラメータが 1 に設定されているため、プレーヤーが読み込まれると、動画は自動的に再生されます。<iframe id="ytplayer" src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com" width="640" height="360" frameborder="0"></iframe>
ショート動画を設定したい場合
1. YouTubeのショート動画のURLを取得します
※URLはYouTubeの共有ボタンから取得可能です。
参考URL:https://youtube.com/shorts/動画ID?feature=share
2. 取得したURLを、通常、動画を埋め込んだ際に利用するembedのURLに書き換えます。
例:https://www.youtube.com/embed/動画ID
3. 2で書き換えたURLを「動画のIDまたはURL」に入力し、取り込むボタンを押します。
※iframeパーツを使用したい場合は、YouTube動画で右クリックをして、「埋め込みコードをコピー」
をクリックして取得し、iframeパーツを使用して設定ください。