Youtube動画の埋め込み

サポート部の市川です。
通販サイトでは動画を活用することで、ユーザーの購買意欲を高めることができます。
実店舗で商品を見たり触れたりすることができない代わりに、動画を見ることでユーザーは商品を擬似体験することができ使用感・イメージを高めることができるからです。
今回はYoutubeにアップロードした動画をサイトで活用できるようサイトへの動画埋込方法についてご紹介します。とても簡単なので積極的にご活用ください。

手順①動画の埋め込みコードを取得する

まずは弊社ロックウェーブ公開動画aishipR　レスポンシブECサイトとはのページを例にとって説明します。このページ内の「共有」をクリックすることで動画埋め込みコードを取得することができます。

取得したコードは下記の通りです。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/58Hj4BsMIQs" 
frameborder="0" allowfullscreen>
</iframe>

上記コードをコピー＆ペーストするだけでも動画の設置は可能ですが、このままではデバイスサイズによっては、動画の全画面が表示されない場合があります。モバイルデバイスでの視聴もふまえ、CSSを使ってデバイスごとのスクリーンサイズに最適化（レスポンシブ対応）できるようにしましょう。
まずはdivタグでくくって「video」というクラスを追加します。またiframeタグに設定されている縦横サイズの初期値も削除します。

<div class="video">
  <iframe
  src="https://www.youtube.com/embed/58Hj4BsMIQs" 
  frameborder="0" allowfullscreen>
  </iframe>
</div>

手順②CSSを使ってレスポンシブ対応する

レスポンシブ対応するために次のCSSを追記します。

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

※このCSSコードは
WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 | HTML5でサイトをつくろう
を参考にさせていただきました。

【サンプルデモ】

実際にモバイルデバイスでもPCでも最適サイズで表示されることをお確かめください。

動画の埋め込みオプション

Youtubeでは再生方法について様々なオプションを用意しています。

例えばiframeタグのsrcに設定してあるURLに文字列「?&autoplay=1」を追加することで自動再生をすることができます。
※埋め込み動画の再生は、視聴回数としてカウントされません。

<div class="video">
  <iframe
  src="https://www.youtube.com/embed/58Hj4BsMIQs?&autoplay=1" 
  frameborder="0" allowfullscreen>
  </iframe>
</div>

【サンプルデモ】

その他各種オプションやパラメーターの使い方については下記のサイトが参考になります。
[前編]これでもう悩まない。YouTube動画の埋め込みに使える便利なパラメーター14選

おわりに

動画によるマーケティングの成功事例についてはこちらの記事もお読みください。

買いたい気持ちを高める！動画を活用したECサイトの事例
コンバージョン率アップの施策として間違いなく効果があるといえるでしょう。動画を使うことで商品が思っていたのと違っていたらどうしようというユーザーの不安を減らして、返品率も減らすといった効果も期待できます。どんどん活用していきましょう！