スポンサードサーチ
企業サイトやECサイトで動画を活用するケースが増えてきました。
また、企業側も以前は動画の著作権を気にして著作権保護ができる動画配信サービスを利用するプロジェクトが多かったのですが、最近では動画がソーシャルメディアでの拡散をされる方が望ましいという事で、YouTubeを利用するクライアントが大半となりました。
そこで、今回はYoutubeにアップロードした動画をWebサイトに埋込む方法についてご紹介します。
目次
YouTubeの動画を埋め込む方法
まず、埋め込みたい動画をYouTubeで表示します。
今回は、WORLD ORDERの”ONE STEP FORWARD”のプロモーションビデオを例にしました。

この時に、タイトルの下にある「共有」をクリックすると、ポップアップが表示されます。

動画の埋め込みコードを取得する
ポップアップの下にある、「埋め込み」をクリックして埋め込みコードを取得します。

取得したコードはこちら。
<iframe width="560" height="315" src="https://www.youtube.com/embed/zMcTRiAq2Y4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
こちらのコードをコピー&ペーストするだけでも動画の設置は可能です。
ただし、この状態だとレスポンシブ対応になっていませんので、端末によっては動画の全画面が表示されない場合があります。
そこで、スマートフォンやタブレットでの視聴を想定し、CSSを使って端末ごとに最適化するレスポンシブ対応にします。
CSSでレスポンシブ対応
まずは「movie」というクラスを持たせたdivタグで動画の埋込コードを囲います。
<div class="movie">
さらに、レスポンシブ対応にするCSSを追加します。
.movie{ position:relative; width:100%; padding-top:56.25%; } .movie iframe{ position:absolute; top:0; right:0; width:100%; height:100%; }
これを追加したサンプルがこちら。
これで、動画をレスポンシブ対応にできました。
Bootstrapの場合は用意されているものを使う
Bootstrapで作られているWebサイトの場合には、元々対応方法が用意されています。
以下のように、使いたいアスペクト比に応じてコードを使い分けます。
<!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
16:9だとこんな感じ。
WordPressの場合、「AddQuicktag」でボタン追加
WordPressを使っている場合、このdivタグを埋め込むのにPlugin(プラグイン)の「AddQuicktag」を使って予めボタンとして登録しておく事で、簡単にレスポンシブ対応にできます。
「AddQuicktag」の使い方については、AddQuicktagの使い方 デザイン性の高いクライアントワークに必須なWordPress Pluginをご覧ください。
WebサイトやECサイトに動画の埋込を検討されてる方は、ぜひやってみてください。
ITのことで、お困りではありませんか?
ITは、コンサルティングからプロジェクトを全体を見据えて実施しなければ上手くいきません。
リソース・シェアリングは、ITのコンシェルジュとして、クライアントにとっての最適解をご提案するコンサルティングから構築・運用・解析までをワンストップで対応できるITコンサルティング会社です。
ITに関してお困りのことがあればお気軽にご相談ください。
ITプロジェクトで最適解を探すなら
御社にとって最適なWebサイト構築をするなら
失敗しないWebシステム開発をするなら
WordPressを活用したいなら
ECサイトを構築したいなら
越境ECサイトを構築したいなら
企業間取引向けECサイトを構築したいなら
マーケットプレス型ECサイトを構築したいなら
課題や事例から最適解を探すなら
リソース・シェアリングの実績
お問合せ
スポンサードサーチ
次も気に入っていただけるかもしれません
株式会社リソース・シェアリング
〒104-0061
東京都中央区銀座7丁目13番6号
サガミビル2階