1. トップページ
  2. コラム
  3. 用途に合わせた動画埋め込み方法【videoタグ・ifreamタグ】

用途に合わせた動画埋め込み方法【videoタグ・ifreamタグ】

別のコラムで、動画マーケティングについてご紹介しました。

動画マーケティングとは|制作会社に依頼した方が良い理由。事例も解説【WEBマーケティング】:https://dt-media.jp/column/?act=Detail&cms_id=00000488

本記事ではWEBページへの動画埋め込みの方法を用途に合わせてご紹介します。

WEBページへの動画埋め込み方法


WEBページに動画を埋め込む方法は大きく分けて2つあります。
・動画ファイルを直接埋め込む(videoタグで埋め込む)
・Youtubeなどの動画サイトから埋め込む(ifreamタグで埋め込む)

動画サイトから埋め込む
■メリット
・自社サーバーへの負担が殆どかからないため埋め込む動画の容量を気にせず埋め込むことができる
・外部からの流入が期待できる(Youtube内のリンクからHPにアクセスしてもらえるような通路ができる)

■デメリット
・Youtubeなどの動画サイトから埋め込んだと一目でわかるような装飾になる
・サービスが終了すれば、アップした動画は再生できなくなる。

■埋め込みに適している用途
・数分ある動画(容量が重い動画)
・音声も一緒に流したい動画
→紹介動画や説明動画が適しています

動画ファイルを直接埋め込む
■メリット
・外部の動画サイト(Youtube等)からの埋め込みと違い、装飾がカスタマイズ可能
・ページに躍動感が生まれる

■デメリット
・数分ある動画だと容量が大きくなりページの読み込みに時間がかかる(SEOに影響がでてしまう)
・Chromeだとミュート(無音)になってしまう
・ユーザーによっては再生できない場合がある

webサイトにvideoタグで動画を埋め込む際のTIPS:https://dt-media.jp/column/?act=Detail&cms_id=00000438

■埋め込みに適している用途
・容量が少ない動画(1分以内、5MB以下の動画)
・外部の動画サイトの装飾を適用させたくない動画
・音声が必要のない動画
→上記2点を念頭に置いたトップ画像や背景画像が適しています


それぞれの埋め込み方法を適材適所で使い分けることで、動画を最大限に生かしましょう!

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!


この記事を書いた人

デザイントランスメディア

Creative & Development Division