公開日:2022/06/19近年、動画の利用頻度は増加し続け、今では必須のマーケティングツールとなっています。そんな動画をWebサイトに埋め込みたいと思ったことはありませんか?しかし、知識がなく具体的にどうやったら良いかわからないという方も多いでしょう。今回は、そんな方に向けて、HTMLを使って動画をWebサイトに埋め込む方法を解説します。HTMLはわかるけど、動画の埋め込みは実はよくわからないという方も必見の内容です。最後までお読みください。まとめ動画の埋め込みに使用するvideoタグとiframeタグHTML形式で動画をWebサイトに埋め込む方法としては、以下の2つの方法が一般的です。videoタグiframeタグ今回は、このvideoタグとiframeタグを利用した動画の埋め込み方法について解説していきます。videoタグとiframeタグの特徴HTML形式でWebサイトに動画を埋め込む方法としてよく利用されるvideoタグとiframeタグですが、それぞれに異なる特徴があります。そのため、埋め込みたい動画の種類や表示方法などによって使い分ける必要があります。それぞれのタグの特徴と使い分けを簡単に説明します。次の項では、それぞれの詳細な特徴や具体的な使い方について解説していきます。videoタグの使い方と属性一覧videoタグはHTML5※から登場した比較的新しいタグです。Standardに統合されています)高画質動画として多く利用されている「mp4」、iPhoneで利用されている「.mov」などに対応し、幅広い拡張子の動画を埋め込むことができる使い勝手の良いタグです。2022年3月時点では、一般的に使用されているほとんどのブラウザがmp4に対応しているため、Webサイトで使用する動画形式もmp4が主流です。そのため、videoタグはHTMLへの動画埋め込み方法として多くのWebサイトで利用されています。それでは、具体的にvideoタグの使い方について解説していきます。videoタグの使い方videoタグは、src属性に埋め込みたい動画のパスを指定することで動画を表示させることができます。このままでは埋め込まれた動画の再生・停止などの操作をWeb上で行うことができないため、追加したい機能を設定する必要があります。videoタグで使える代表的な属性一覧videoタグでは、埋め込んだ動画のサイズ変更や再生・停止できる機能を追加するために、以下の属性を設定する必要があります。操作をできるようにするための属性です。設定することで再生ボタン、シークバー、ボリュームなどのコントロールパネルが表示されるようになります。src=””sample.mp4””></video>width、height動画の横幅(width)、縦幅(height)を調整するための属性です。数値(px)で設定するため、%表示などレスポンシブな設定はできません。レスポンシブなWebサイトに対応させたい場合はCSSで表示サイズの設定を行うことをおすすめします。src=”sample.mp4”></video>autoplayWebサイトの読み込みと同時に動画を自動再生させるための属性です。注意として、chromeは音の出る動画の自動再生ができない仕様になっているため、muted属性を追加することが必要です(muted属性を追加することで自動再生されるようになります)。src=”sample.mp4”></video>preloadWebサイトの読み込みに合わせて動画の読み込み方法を指示するための属性です。初期値はpreload=”auto”なので、何も指定しなくても動画はダウンロードされますが、必要に応じて以下を設定します。src=”sample.mp4”></video>loop動画を繰り返し再生させるための属性です。src=”sample.mp4”></video>poster動画のトップ画面を設定するための属性です。動画がダウンロードされる間(再生ボタンが押される前)に表示される画像を設定することができます。この属性を指定しない場合、動画が再生されるまでは埋め込んだ動画の最初のフレームが表示されます。poster=”/image/sample.png”src=”sample.mp4”></video>playsinline動画をインライン再生させるための属性です。スマートフォンで動画を再生する際、全画面表示にせず、インライン再生ができるようになります。Frameの省略で、そのまま「インラインフレーム」や「アイフレーム」と呼ばれています。iframeタグは、Web上にアップロードされているコンテンツを自分のWebサイトに表示させたい時に使います。Webサイトの中に別のWebサイトのページが埋め込まれているような状態です。YouTubeなどの動画コンテンツの埋め込みなど、多くのシーンで利用されています。ここでは、特に利用される事の多いiframeタグを利用したYouTube動画の埋め込みについて、詳しく解説していきます。iframeタグの使い方iframeタグを使うとYouTube動画の埋め込みが簡単にできるのが最大の特徴です。YouTube動画は以下の手順で埋め込むことができます。埋め込みたいYouTube動画の「共有」ボタンをクリックポップアップした画面の左端「埋め込む」ボタンをクリック表示された「動画の埋め込み」からiframeタグを全てコピーコピーしたタグを埋め込みたいHTMLへペーストiframeタグもvideoタグと同様に、必要な属性を設定することで、埋め込んだ動画にWebサイトに最適な設定を追加することができます。iframeタグで使える代表的な属性一覧YouTubeなどの場合、前述の通り共有ボタンから簡単にコピー&ペーストで動画の埋め込みができてしまいます。単純に埋め込むだけでユーザーにとって最適な表示になるとは限りません。カスタマイズの幅を広げるために、iframeの属性についても確認しておきましょう。width、height動画の横幅(width)、縦幅(height)を調整するための属性です。src=”sample.html”></iframe>src埋め込む動画のURLを指定するための属性です。src=”sample.html”></iframe>titleアクセシビリティの観点から、動画の説明を設定するための属性です。src=”sample.html”></iframe>nameフレーム名を設定するための属性です。JavaScriptなどで要素を取得する際などに使用します。src=”sample.html”></iframe>sandboxセキュリティ制限を設定するための属性です。sandboxには以下のような値を設定することができます。半角スペースで区切って複数の値を設定する事も可能です。何も値を設定しない場合は、すべてのセキュリティー制限が適用されます。必要に応じて設定するようにしましょう。src=”sample.html”></iframe>loading遅延読み込みに使用する属性です。遅延読み込みとは、スクロールで動画が表示されそうになったタイミングで読み込みを始める設定の事です。src=”sample.html”></iframe>allow埋め込んだ動画に対してさまざまな機能を設定する属性です。allow属性もsandbox同様、様々な値を設定することができます。値は「;」で区切って複数設定する事も可能です。src=”sample.html”></iframe>動画をマルチブラウザに対応させる方法Webサイトを閲覧する環境はユーザーによってさまざまです。そのため、どのような環境でも問題なく閲覧できるように、videoタグとiframeタグを設定する必要があります。これをマルチブラウザ対応と呼びます。videoタグの場合videoタグで埋め込んだ動画をマルチブラウザ対応にするためには、追加でsourceタグを利用するのが一般的です。sourceタグは、videoタグの中に複数の設定の入れ子として指定するためのタグです。sourceタグを使って埋め込む動画を複数設定することでさまざまな環境で動画が再生できるようになります。type=”video/quicktime”></video>上記のようにvideoタグの中にsourceタグで異なる拡張子の動画を設定しておくことで、閲覧したユーザーの環境に適した動画を再生することが可能です。HTMLに埋め込んだ動画が閲覧するユーザー側の環境では再生できない場合を想定して以下の設定を追加しておくことをおすすめします。type=”video/quicktime”><p>非対応の形式のため動画を再生できません。</p></video>動画が再生できない環境の場合<p></p>の間の文字列が表示されるため、念のため設定しておくとよいでしょう。iframeタグの場合iframeは比較的古くからあるタグで、ほとんどのブラウザで対応しています。そのため、表示させるだけならそのままでも問題ありません。ブラウザサイズに応じて幅を変化させるレスポンシブデザインに対応させるにはCSSでの対応が必要です。以下のサンプルコードはその一例です。「タグを利用して動画の埋め込みを行ったにも関わらず動画が再生されない」など、正しく設定したつもりでも、ちょっとした事で動画が表示されないことはよくあります。そのような場合に確認すべき項目と対処法をいくつか紹介します。タグ・動画のパスなどコードの記述を確認タグやパスなどを含むコードは、一文字違っているだけでも正しく表示されません。そのため、想定していた挙動と異なる場合はコードを一から確認してみましょう。これだけで解決する場合も多くあるものです。動画の埋め込みをした際やWebサイトの設定が変わった際などにはよく確認するようにしましょう。前述の通り、ブラウザやPC・スマートフォンなどWebサイトの閲覧環境はさまざまです。動画が正しく再生されない場合、別の環境での確認を試みるようにしましょう。Explorer、Firefoxなどで確認します。スマートフォンであればAndroid、iOSを試します。どれか特定の環境で正しく表示されない場合は、属性の設定に過不足がないかを改めて確認してみましょう。動画をマルチブラウザに対応させる方法の項でも説明したように、videoタグではsourceタグを使って動画をマルチブラウザに対応させる事も有効です。閲覧環境の設定を確認コードの確認やタグ、属性の見直しを行ったにも関わらず動画が正しく再生されない場合は、自身の閲覧環境の設定も確認してみましょう。iPhoneでWebサイトを閲覧する際、iPhoneが省電力モードの設定になっていると動画が自動再生されない事があります。このように、閲覧する端末の設定が動画の再生に影響する事も考えられます。埋め込んだ動画を確認する際は、複数のブラウザと端末での確認に加え、細かい設定が影響している可能性も考慮する必要があります。色々なコンテンツへの埋め込み今回はWebサイトへ動画を埋め込む方法について解説してきました。5G回線のさらなる普及や動画コンテンツの増加、それに伴いWebサイト以外でも動画コンテンツを活用する場面はますます増えると予想されます。そこでここでは、番外編としてWebサイト以外への動画の埋め込み方法をいくつか紹介します。Twitter投稿への動画埋め込みHTMLを使うWebサイトへの埋め込みとは違い、Twitterへはローカル内(PCやスマートフォン)に保存された動画を直接埋め込む方法が一般的です。手順は以下の3つだけです。投稿したいテキストを入力メールやLINEに動画を貼り付ける感覚で直感的に動画の埋め込みができるため、Webサイトへの埋め込みと比較すると手軽に動画を埋め込むことができます。投稿に動画が埋め込まれるため、サイズの変更などの設定をすることはできません。Twitter投稿で設定できるのは自動再生に関してのみです。「設定とプライバシー」の項目から「動画の自動再生」のオン・オフを切り替えることができます。Twitter投稿へ動画を埋め込む場合、以下の2つが注意点として挙げられます。1つ目は、投稿できる動画の形式が、videoタグを使ってWebサイトに動画を埋め込む場合に比べると少なくなる点です。携帯端末からは「mp4」「mov」の2種類、ブラウザからは「mp4」のみが対応しているファイル形式です。2つ目の注意点は、埋め込める動画サイズ・再生時間が限られている点です。Twitter投稿には長さ2分20秒、512MB以下の動画しか埋め込めない仕様になっています。長さやサイズが上記を超える動画を埋め込みたい場合は、別の方法で埋め込む必要があります。埋め込む以外でよく使われる方法は、YouTubeにアップロードした動画を貼り付ける方法です。埋め込みたいYouTube動画の共有ボタンをクリックし、Twitterを選択することで、YouTube動画を埋め込んだツイートを投稿することができます。PDFファイルへの動画埋め込みあまり広く知られていませんが、ビジネスシーンでよく利用されるPDFファイルにも動画を埋め込むことができます。手順は以下の通りです。埋め込みたい動画ファイルを選択PDFへの動画の埋め込みは、videoタグを利用したHTMLを使った動画の埋め込みのようにいくつかの属性を追加することが可能です。詳細オプションから「コントロール」のタブを開き「スキン」のプルダウンから好みの設定を選択しましょう。コントロールバー自体の有無や、再生・ミュートボタン、シークバーの有無などが変更可能です。DCは有償ソフトですが、動画埋め込み以外にもさまざまな機能があります。興味のある方は試してみてください。QRコードで動画埋め込みQRコードはURLを二次元コード化したものです。チラシやポスターなど多くの販促物でもよく見かけるようになりました。iCloudやYouTubeなどで公開設定にしている動画のURLをQRコード化すれば、動画を再生できない紙媒体でもPRすることができます。まとめさまざまなシーンで動画コンテンツが活用されています。今回はその動画コンテンツの埋め込み方法やよく起こる問題点と解決策について解説しました。HTMLは多くのWebサイトで使われている言語であるため、videoタグとiframeタグは、Webサイトを運営するうえで必須の知識の1つと言えます。コードを直接書き込まなくてもWebサイトを作成できるWordPressのようなCMSを利用していた人も、これを機に、埋め込まれた動画のコードを書き換えて自分好みにカスタマイズしてみてはいかがでしょうか。(今回紹介したサンプルコードは一例です。