記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

ECサイトにYoutube等の動画コンテンツを設置する方法【レスポンシブデザイン対応】

ECサイトにYoutube等の動画コンテンツを設置する方法【レスポンシブデザイン対応】

ECサイトにおける動画コンテンツの活用は、消費者の購買意欲の向上に繋げるきっかけとなります。実店舗のように商品を見たり触れたりすることができない代わりに、動画コンテンツを見ることで動きや音など静止画では取得できない情報を知り得ることに繋がります。また、商品の実際の使用感を確認できたり、設置や組み立ての方法を説明するためにも有効です。
ECにおける動画コンテンツの公開は販促プロモーションの一環として、今に始まったわけでもなく以前より注目されておりましたが、最近のYoutube等の動画共有サービスが広く認知されたことで、動画コンテンツの重要性を再認識されているEC事業者様も多いかと思います。そこで本記事では、作成した動画コンテンツをECサイト上で設置する方法をまとめました。

方法1:videoタグを使ってHTMLで動画コンテンツを埋め込む

まずはFTP等のファイルのアップロード機能を利用し、作成した動画コンテンツをサーバーにアップロードします。動画のアップロードが完了したら、下記サンプルのようなvideoタグを使い、表示させたい位置にコードを設置します。

▼サンプル

<video src="test.mp4" width="500" height="300" poster="thumb.jpg" controls autoplay muted loop />

サンプルのソースコードに含めております各属性の詳細は以下となります。必要に応じて設定頂けます。

width/height属性 動画の幅と高さはpx指定が必須で、%などの可変指定はできません。
poster属性 サムネイル画像(再生する前に表示する画像)を指定します。
controls属性 再生ボタンや再生位置、ボリュームなどのコントロールパネルを表示することができます。属性に値は不要でcontrolsだけを書けば表示されます。
autoplay属性 読み込んだファイルを自動的に再生します。
muted属性 埋め込み動画の音をミュート(消音)するかどうかを指定します。
loop属性 動画を自動で繰り返し再生させることができます。

方法2:Youtubeなどの動画共有サービスで公開した動画を設置する

Youtubeなどの動画投稿共有サイトを利用する場合、作成した動画コンテンツを投稿サイトにアップロード後、生成されたソースコードをECサイト上に埋め込みます。Youtubeの場合、こちらのヘルプページを参考にし、ソースコードを取得します。

▼サンプル

<iframe width="560" height="315" src="https://www.youtube.com/xxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Youtube 動画コンテンツの埋め込みをCSSでレスポンシブ対応する方法

Youtubeから取得した上記のソースコードをコピー&ペーストするだけでも動画コンテンツの設置は可能です。しかしこのままではデバイスサイズによっては、動画コンテンツが全画面で表示されない場合があります。様々なデバイスでの視聴時においても最適化表示されるよう、CSSを使用してレスポンシブ対応する方法をご紹介致します。

Youtubeから取得したソースコードを任意のclass名を作成してdivタグで括ります。※今回の例の場合、youtubeというclass名にしております。

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/xxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Youtubeから取得したソースコードはiframe形式となっており、widthやheightの値が固定されております。レスポンシブ対応をする為にCSSでiframe要素のwidthとheightを100%にして、位置をposition:absoluteにして調整していきます。

.youtube{
  position:relative;
  width:100%;
 padding-top:56.25%;
}

.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

以上で完成です。余白などの調整が必要な場合は、任意で追加してください。

ECサイト上にてYoutube動画コンテンツを公開している事例


北海道の名菓子・柳月様の商品ページにて、大人気商品「あんバタサン」CMのネット限定動画をアップロードされております。


カーテン通販のくれない様では、静止画で説明するよりも分かりやすいカーテンの採寸方法を動画で公開されております。

まとめ

いかがでしたでしょうか。今回、ECサイトに動画コンテンツを設置する方法として、2つの方法をご紹介しましたが、お薦めは方法2のYouTubeなどの動画共有サイトの利用です。

方法1と方法2の大きな違いは、動画を投稿する場所にあります。動画コンテンツを自社サーバーにアップロードする場合、容量を気にする必要があったり、サーバーに負荷がかかると読み込み速度に影響が出ることも考えられます。動画共有サイトを利用する場合は、動画自体を投稿サイト側にアップロードする為、例えばYoutubeの場合、現時点ではアップロードできる1つのファイルの最大サイズ容量が定められておりますが、動画の本数に関する制約は見当たりません(Youtubeヘルプを参照)。つまり、容量に関してさほど気にせず投稿することが出来ます。それだけでなく、多くの人が閲覧するプラットフォームを利用することで、良い動画コンテンツはバズらせたり、動画共有サイト側からの流入も期待できます。

せっかく作成した動画コンテンツですから、ストレスを感じさせない環境で少しでも多くの人の目に留まるような方法で公開し、ECの繁栄に繋げていきましょう。

                   
クラウドECのサイト構築はaiship-カスタマイズ可能なカートASP

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

EC運営ノウハウカテゴリの最新記事