どうも塚田です。
今回はYouTubeのカスタムコードについて解説していきます。
YouTubeの埋め込みコードはそのままでも使用できますが、
少し工夫することで違った再生方法で再生させることが可能になります。
カスタムコードは様々なものがありますが、
ここでは主要なものだけ紹介していきたいと思います。
・埋め込み動画のサイズを変更する方法
・関連記事を表示させない方法
・YouTubeの動画をHD画質で再生する方法
・メニューバーを非表示する方法
YouTubeのカスタムコードを使ったカスタマイズを動画で解説
基本のコードとコードの変更場所
YouTubeの基本の埋め込みコードはこのような形式になっています。
<iframe width=”横幅” height=”縦幅” src=”//www.youtube.com/embed/動画のURL” frameborder=”0″ allowfullscreen></iframe>
カスタムコードを埋め込むには、動画のURLの後に「?」を入力して、
その後にカスタムコードを挿入します。
カスタムコードを複数挿入したい場合は、コードとコードの間を「&」で繋げていきます。
<iframe width=”横幅” height=”縦幅” src=”//www.youtube.com/embed/動画のURL?カスタムコード&カスタムコード” frameborder=”0″ allowfullscreen></iframe>
このような形式でカスタムコードを追加していけば、
YouTubeをカスタマイズすることができます。
その他のカスタムコード
動画で解説しているコード以外にもYouTubeのカスタムコードは様々なものがあります。
コードの一覧を下に貼っておきますので、参考にしてくださいね！
YouTube動画サイズの変更
YouTubeの埋め込み動画のサイズを変更するには、
埋め込みコード内の「width」「height」の数字の部分を変更してください。
【width=”ここの数字を変更することで横幅が変更”】
【height=”ここの数字を変更することで横幅が変更”】
YouTube関連記事を表示させないコード
YouTubeの動画で再生が終わった後に関連記事を表示させたくない場合は、
URLの後に「?」を追加してその後に「rel=0」のコードを挿入してください。
【rel=0】・・・関連記事を表示しないコード
YouTubeの動画をHD画質で再生させるコード
【vq=hd1080】・・・HD1080pで再生させるコード
【vq=hd720】・・・HD780pで再生させるコード
コントロールバーとプログレスバーの表示を変更するコード
【autohide=1 】・・・コントロールバーとプログレスバーの表示
【autohide=0】・・・コントロールバーとプログレスバーを表示させ続ける
タイトルバーの表示を変更するコード
【showinfo=0】・・・タイトルバーを非表示
【showinfo=1】・・・タイトルバーを表示
コントロールバーの表示を変更するコード
【controls=0】・・・コントロールバー非表示
【controls=1】・・・コントロールバー表示
YouTubeアノテーションの表示を変更するコード
【iv_load_policy=1】・・・アノテーションを非表示
【iv_load_policy=3】・・・アノテーションを表示
Youtubeのロゴの表示を変更するコード
【modestbranding=0】・・・ロゴを表示
【modestbranding=1】・・・ロゴを非表示にする
YouTubeプレイヤーの色を変更するコード
【theme=dark】・・・色を黒に変更
【theme=light】・・・色を白に変更
【color=red】・・・シークバーの色を赤に変更
【color=white】・・・シークバーの色を白に変更
Youtubeのロゴの表示を変更するコード
【modestbranding=0】・・・ロゴを表示させる
【modestbranding=1】・・・ロゴ非表示にする
YouTubeの動画を自動で再生させるコード
【autoplay=1】・・・動画を自動で再生
ちょっとした工夫をすることで、動画を見る人の満足度も高まります。
ぜひカスタムコードを使ってよりクオリティの高いコンテンツを製作してみてください。
