【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Youtube動画の埋め込み方法

Youtube動画の埋め込み方法

Youtube動画の埋め込み

サポート部の市川です。
ECサイトでは動画を活用することで、ユーザーの購買意欲を高めることができます。現在は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?&amp;autoplay=1" 
  frameborder="0" allowfullscreen>
  </iframe>
</div>

【サンプルデモ】

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

おわりに

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

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+