bingo!CMSニュースレター

配信:2021年10月20日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像(ニュースレタートップ用)
こんにちは!bingo!CMS 広報担当の鈴木です。
 
bingo!CMSでYouTube動画をご利用の方は多いと思いますが、「パラメータ」を使用して動画に細かなカスタマイズができることをご存じですか?
 
bingo!CMSでの設定方法をご紹介します!
 
 

パラメータでカスタマイズしたYouTube動画をbingo!CMSへ設定する方法


まず前提ですが、このカスタマイズではbingo!CMSの「動画v17」等、動画系のユニットは使用しません。
 
「HTMLv17」にiflameタグを記述して実装します。
 
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
 

基本のタグ

基本となるiframeタグは以下の通りです。
「HTMLv17」ユニット編集画面内にある「HTML」記述欄に入力してください。

<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/任意の動画ID" frameborder="0"></iframe>
 
この例では640×360ピクセルのプレーヤーが読み込まれます。
 
ちなみに、埋め込みプレーヤーは少なくとも200×200ピクセルのビューポートが必要です。
YouTubeでは最低で480×270ピクセル、アスペクト比16:9を推奨しています。
 
上記タグ内の「任意の動画ID」の部分を、パラメータを使用したい動画IDに置き換えて使用してください。
 
YouTube 動画IDの確認方法

動画IDとは、動画のURL末尾11桁の英数字のことを指します。
 

パラメータのつけかた

タグ内の動画IDの最後に「?」をつけてパラメータを記述します。

<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/任意の動画ID?任意のパラメータ1&任意のパラメータ2" frameborder="0"></iframe>
 
複数のパラメータを使用したい場合は、上記のように「&」でつなげることも可能です。
 
 

Web制作に役立ちそうなパラメータ3選


パラメータはたくさん種類があるため、ここでは厳選して3つご紹介します。
 
先に紹介した「基本のタグ」の「https〜任意の動画ID」部分をまるっと置き換えていただくだけで簡単に実装できますよ。
 

動画をループさせる

同じ動画を繰り返し再生したいときに有効です。

https://www.youtube.com/embed/任意の動画ID?loop=1&playlist=任意の動画ID
 


コントロールを非表示にする

動画の下部ある、再生/停止や音量の調整を行うコントロール部分を非表示にできます。

https://www.youtube.com/embed/任意の動画ID?controls=0
 


ミュートにする

動画の音声をミュート(消音)にできます。

https://www.youtube.com/embed/任意の動画ID?mute=1
 
 
 

いずれ「動画v17」の編集画面内でパラメータを細かく設定できるようになれば良いなと思いますが、こんな方法もあるよ〜というご紹介でした。
 
他にも「字幕を表示する」など役立ちそうなパラメータがたくさんありました。
ご興味がある方はぜひYouTubeの公式ドキュメントをご確認ください。
 
以上、お役に立てば幸いです。
 
 
それでは!
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ