TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】

初心者向けにYouTubeの動画をHTML5に埋め込む方法について解説しています。videoタグを使った動画埋め込みの基本とiframeタグを使ったYouTubeの動画の埋め込み方法を説明します。共有リンクの取得手順と書き方を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

YouTubeの動画をHTML5に埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

YouTubeの動画をHTML5に埋め込む方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

動画をHTML5に埋め込む方法

HTMLに対して、videoタグを使用することで動画を簡単に埋め込むことが可能です。

この場合、プラグインを使わずに動画再生ができます。

src属性により動画ファイルのアドレス・保存先を指定する、videoタグ内にwidthとheightでコンテンツの幅と高さを指定できます。

また、再生方法も適宜変更することが可能です。

 

conrtols属性を使い、ビデオの再生や停止のボタンなどのユーザーインターフェースを表示できるでしょう。

自動で再生したい場合にはautoplay属性を使用し、再生終了後にスタートに戻り、再生を再度行なう場合にはloop属性を使用できます。

 

YouTubeの動画をHTML5に埋め込む方法

iframeタグを使用することで、HTMLにyoutubeの動画を埋め込むことが可能です。

youtubeのホーム画面から適宜埋め込むyoutube動画を選択し、「共有」を選択、「埋め込む」を選択、表示されたiframeタグで書かれたコードをコピーします。

コピーしたコードをbody内に直接貼り付けることで、youtube動画を表示できます。

 

[PR] Webデザインで副業する方法とは

実際に書いてみよう

imageフォルダの中にあるmp4形式の動画を埋め込む場合は、下記のように記述します。

<body>

    <video src="image/video.mp4" controls="controls"></video>

</body>

youtube動画を埋め込む場合

<body>

    （youtubeからコピーしたifarmeタグのコードをそのまま記述する。例　<iframe　◯◯></iframe>）

</body>

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

YouTubeの動画をHTML5に埋め込む方法がよく分かったので、良かったです！

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコードを表示する方法について、テックアカデミー...
HTML

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方を現役エンジニアが解説【初心者向け】

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
HTML

HTMLでページ内リンクがずれる原因を解消する方法を現役エンジニアが解説【初心者向け】

HTMLでページ内リンクがずれる原因を解消する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】

HTMLのページが重い原因を調べて読み込み速度を改善する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

HTMLでdivが多いソースをおすすめしない理由を現役デザイナーが解説【初心者向け】

HTMLでdivが多いソースをおすすめしない理由について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...
HTML

HTML5でパズルゲームの作り方を現役エンジニアが解説【初心者向け】

HTML5でパズルゲームの作り方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

あわせてよく読まれている記事

WordPressで記事にYouTubeの動画を埋め込む3つの方法【初心者向け】

WordPressではYouTubeの動画を簡単に記事に埋め込むことができます。 今回はYouTubeの動画を埋め込む3つの方法をご紹介します。 プラグインを使わなくても簡単に実装できます。   目次動画をHTML5に埋め込む方法YouTubeの動画をHTML5に埋め込む方法実際に書いてみよう執筆してくれたメンター   大石ゆかり 田島メンター！！WordPressの記事の中にYouTubeの動画を入れたいんですけど、どうしたらいいですか〜？ 田島悠介 いくつか方法があるけど、どれも難しくないから、一応ひととおり教えてあげるね！ 大石ゆかり はい、お願いします♪   事前準備 まずは投稿の画面を開きましょう。 ここに動画を埋め込んでいきます。 投稿の画面の開き方がわからない方は、WordPressで記事を投稿する方法を見ながら、以下の画面を表示させてください。   URLを書き込む まずは一番簡単な方法です。 挿入したい動画のページを開き、URLをコピーします。   記事内にURLをペーストします。 これだけです。   このときの注意点として、URLを書いた行にはURL以外の文字を入力しないように気をつけてください。 例えば、以下のように入力してしまった場合、動画は埋め込まれません。   また、この方法で埋め込む場合、動画のサイズは指定することができず、自動的にそのページの横幅に合わせて表示されます。   [PR] Webデザインで副業する方法とはショートコードを記述する 先ほどの方法では動画のサイズを指定できなかったので、サイズを指定したい場合は次の方法を使います。 今度は＋マークをクリックして「ショートコード」のブロックを選択します。 動画のURLの前後に、以下のようなショートコードを記述してください。 幅はピクセル単位で指定します。   動画の縦横の比率は変えることができませんので、幅を指定すると自動的に高さが設定されます。   また、URLを直接書き込む場合は、前後に文字を入力できませんでしたが、ショートコードを使う場合は前後に文字を入力しても埋め込むことができるので、以下のように入力しても大丈夫です。   実際の記事では、以下のように表示されます。   YouTubeから提供されている埋め込みコードを使う 最後に、YouTubeが提供している埋め込みコードを使った動画の埋め込み方をご紹介します。   まずは、埋め込みたいYouTubeの動画のページを開いてください。 動画の下の「共有」をクリックしてください。   すると、さらに「埋め込む」をクリックします。   埋め込むためのコードが右側に表示されます。 右下の「コピー」をクリックします。   ここでWordPressの「新規投稿を追加」画面を開き、＋マークをクリックして「カスタムHTML」のブロックを選択します。 埋め込みたい場所に埋め込みコードをペーストします。 これで動画の埋め込みは完了です。 以上、記事に動画を埋め込む方法を3つご紹介しました。 どれも難しくないと思うので、しっかりマスターしましょう。   さらにWordPressを使いこなしたい場合は、WordPressでファビコンを表示させる方法もあわせてご覧ください。   大石ゆかり 無事貼り付けることができました〜♪ 田島悠介 よかったね。どの方法も簡単だから、自分が使いやすい方法を使うといいね♪ 大石ゆかり はい♪   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
WordPress

Pythonのformatメソッドの使い方を現役エンジニアが解説【初心者向け】

Pythonのformatメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonのformatメソッドの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   formatメソッドとは formatメソッドは文字列に変数を埋め込むときに使用するメソッドです。 例えば「今日は○○月××日」という文字列に対して、〇〇と××に変数の値を埋め込むときにformatメソッドを使用します。 formatメソッドを使えば固定の文字列を何度も使いまわすことが可能です。   formatメソッドの使い方 formatメソッドは以下のコードで使用しましょう。 '文字列{}文字列'.format(埋め込みたい値) 文字列の間に{}があり、その箇所にformatメソッドの引数となる埋め込みたい値を埋め込みます。   また、複数の変数を埋め込むことも可能であり、以下のように記述します。 '文字列{}文字列{}文字列'.format(埋め込みたい値1, 埋め込みたい値2) {}の中に引数の番号を書くと引数の順番に関わらず埋め込むことが可能です。 {}の中に番号を書かない場合は、引数の順番通りに一番左の{}から埋め込んでいきましょう。   [PR] Webデザインで副業する方法とは実際に書いてみよう 実際にformatメソッドを使ってみましょう。 以下、プログラムソースコードとなります。 str = "こんにちは！私の名前は{}です。" name = "山田太郎" print(str.format(name))   実行結果 こんにちは！私の名前は山田太郎です。 {}の中にformatメソッドの引数である変数を埋め込むことができました。 次に複数の変数を文字列に埋め込むときを記述してみましょう。   以下、ソースコードになります。 str = "私の名前は{2}です。私の誕生日は{0}月{1}日です。{2}をよろしくお願いします！" name = "山田太郎" month = 12 date = 1 print(str.format(month, date, name))   実行結果 私の名前は山田太郎です。私の誕生日は12月1日です。山田太郎をよろしくお願いします！ {}の中に数字を書くことで変数の指定の位置のものを埋め込むことができます。文字列の中で複数回同じ変数を埋め込むことも可能です。 最後にリストの要素を文字列に埋め込む方法をみていきます。 プログラムソースコード str = "私の名前は{0[0]}です。私の誕生日は{0[1]}月{0[2]}日です。{0[0]}をよろしくお願いします！" list = ['山田太郎', 12, 1] print(str.format(list))   実行結果 私の名前は山田太郎です。私の誕生日は12月1日です。山田太郎をよろしくお願いします！ 埋め込み文字列を{リストの位置[要素番号]}で指定してあげることでリストの要素を埋め込むことができます。   まとめ この記事ではPythonでformatメソッドを使う方法について解説しました。 formatメソッドあPython2.6以降でしか使えません。 Pythonのバージョンにも気を付けて使いましょう。   執筆してくれたメンター メンターSさん システムエンジニアとしてこれまで行政システムや医療用システムの保守、開発に携わりました。 JavaやPython、PHP、Kotlinなど様々な言語での開発経験があります。 TechAcademyではJavaコース、Pythonコース、AIコースなど7コースを担当しています。   大石ゆかり Pythonのformatメソッドの使い方がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
Python

HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】

HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTML5でストリーミング配信された動画再生実装することで、HTML5だけでなく配信技術に対するご理解も深まります。 実務では、HTML5でストリーミング配信する会社への就職、HTML5でストリーミング配信を実装する案件獲得などに繋がります。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ストリーミング再生を実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTML5で配信された動画再生実装する方法（video要素の使い方） HTML5 では、videoタグを記述することでプラグインを使わずに動画を再生することができるようになりました。 その方法は、まず、videoタグの中にsrc属性で音声ファイルのアドレスを指定します。 次にcontrols属性によって、音声の再生や停止などのユーザーインターフェースを指定しましょう。 ブラウザごとに表示されるインターフェース（操作パネル）は異なるため、それぞれを確認してから使用しましょう。 また、controls属性を別の属性として記述することによってvideo表示方法を変えることが可能です。 autoplayは自動再生、loopは繰り返しなどと変更することが可能です。   動画のストリーミング配信とは 動画をストリーミング再生する場合大きく２種類の考え方があります。 それが、HTTP Live Streamingとプログレッシブダウンロードです。   HTTP Live Streaming 動画のストリーミング配信で一般的な方法はHTTP Live Streaming（HLS）という技術を利用しています。 HTTP Live Streamingは元々、アップルがiOS向けに開発しました。 HTTPという汎用的なプロトコル（規格）を利用することで、様々な媒体に対して動画配信が可能です。 メリット 手元の端末にダウンロードしない為、著作権対策が可能 専用サーバーを用意する必要がない デメリット 通信回線が高速安定でない場合は再生が止まってしまう   プログレッシブダウンロード プログレッシブダウンロードは疑似ストリーミングと呼ばれ、配信データをダウンロードして再生します。 メリット すべてのデータをダウンロードし終わっていれば、オフライン状態で再度再生が可能。 デメリット オフライン状態で再度再生が可能ということは、著作権上問題が発生する。     [PR] Webデザインで副業する方法とはHTML5で動画のストリーミング再生を実装する方法 HTTP Live Streaming HTTP Live Streamingを利用したストリーミング配信動画の再生実装方法です。   m3u8ファイルについて m3u8ファイルはストリーミング再生される動画のプレイリストのようなものです。 m3u8ファイル自体をダウンロードしてもオフラインで再生はできません。 m3u8ファイルを利用してストリーミング再生している例としては、TVer、FOD、GYAO!などがあります。   m3u8ファイルを利用した実装 HTTP Live Streamingを利用したストリーミング配信動画を利用する場合は、ライブ配信もオンデマンド配信もどちらにも適しています。 ライブ配信というのは、現在進行系で配信している内容を、配信と同時に見ることを意味します。 オンデマンド配信というのは、過去に配信されていたものを、後日ストリーミング再生で見ることを意味します。 <video src=”./video/test.m3u8″ controls> でtest.m3u8というファイルを指定することでストリーミング配信されたファイルを再生することが出来ます。 これは、htmlと同じ階層内にあるvideoフォルダの中に、test.m3u8というファイルを用意しているという意味になります。 これだけは覚えたい！絶対パスと相対パスの違いを参考にしていただくと階層についてご理解が深まります。 ＊なお次のコードを動作させるためには、./video/test.m3u8の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body>    <video src="./video/test.m3u8" controls>     </video> </body> </html>   プログレッシブダウンロード プログレッシブダウンロードを利用して、疑似ストリーミング再生をする方法です。 mp4の利用 <source src=”./video/test.mp4″> のように指定することでプログレッシブダウンロードを利用した疑似ストリーミングが可能です。 大きなサイズの動画の場合には分割させる必要があるものの、短い動画はvideoタグによりmp4ファイルなどを再生することが可能です。 ＊なお次のコードを動作させるためには、./video/test.mp4の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>プログレッシブダウンロード</title> </head> <body>    <video controls>         <source src="./video/test.mp4">     </video> </body> </html> QuickTimePlayerの利用 また、QuickTimePlayerで再生することもできます。 <source src=”./video/test.mov”> で指定したvideoタグをhtmlに埋め込んで利用可能です。 ＊なお次のコードを動作させるためには、./video/test.movの位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>QuickTimePlayer</title> </head> <body>    <video controls>         <source src="./video/test.mov">     </video> </body> </html>   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。   大石ゆかり HTML5でストリーミング再生を実装する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、今後も分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
HTML

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 videoタグで動画のストリーミング配信を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   ストリーミングとは ストリーミングとは、音声や動画などのメディアを再生する技術のことです。ストリーミングはメディアをすぐに再生することができることから、動画配信サービスや音楽配信アプリで使用されています。これまでは一度メディアをダウンロードしてから再生するサービスが主流でしたが、インターネットの発達から現在はストリーミング再生を採用しているサービス、アプリがメインになっています。 メリット ストリーミングのメリットはダウンロードと違い、インターネットに接続していれば、端末に転送されることなく再生されるので、スマホやパソコンのストレージを使わないのがメリットです。これによりメディアの再生形式と機種に依存することなく様々なメディアを楽しむことができます。 デメリット 端末のストレージを消費することなく再生できる一方でインターネットがなければメディアが再生されないのでネットワークが不安定な環境や通信制限がかかると再生が不安定になります。 また、Wifiを使用している場合は気にしなくてもいいですが、携帯回線を使用している場合は動画を再生するたびにデータ通信量が消費されるので、何も気にせずに使うと簡単に通信制限がかかってしまいます。おそらく、スマホで動画配信を見た経験のある方だとどちらも経験したことのある話だと思います。   videoタグの基本的な使い方と高度な設定を知ろう 動画をストリーミング再生するためにはHTMLのvideoタグを使って実現できます。早速使い方を紹介していきます。 基本的な使い方 基本的な使い方は、videoタグで動画ファイルを参照するだけです。HTMLで画像を扱ったことのある方はimgタグを使う方法と同じです。 <video src="video.mp4"></video> これで動画は表示できますが、再生はされません。 コントローラを追加することで動画を再生、一時停止、ボリューム調整をすることができます。コントローラを追加するには、controls属性を指定します。 <video src="video.mp4" controls></video>   これでストリーミングするための準備ができました。 サムネイルをつける ここからは、videoタグの属性をつかった高度な設定について紹介します。まずは動画ストリーミングサイトでよく使われている動画のトップ画像（サムネイル）を入れる方法です。サムネイルはposter属性をつかって画像ファイルを指定することで乗せることができます。サムネイルを使うことで、動画の内容をしる手がかりになります。 <video src="video.mp4" poster="samne.jpg"></video> 自動再生する autoplay属性を指定することで、ページを読み込んだことで動画が自動で再生されます。 <video src="video.mp4" autoplay></video> サイズを調整する videoタグで動画を再生すると、動画のサイズでそのままHTMLに表示され、大きいサイズだと、ブラウザの画面をはみ出す上に見ずらいです。そこで、width、heightを使って幅と高さを調整する必要があります。これにより、サイトのデザインに合わせて動画をはめ込みやすくなります。 <video src="video.mp4" width="320" height="240">   [PR] Webデザインで副業する方法とは動画を埋め込んで再生してみよう それでは、実際にサンプルコードを使って動画をブラウザで再生しましょう。まずは再生したい動画ファイルを用意します。動画はmp4かogg用意します。用意したら以下のサンプルHTMLと一緒に任意のフォルダ内に保存します。なお、動画ファイルの名前はご自分のものに合わせて変更しておきます <head>     <title>ビデオデモ</title>     <meta charset="utf-8"> </head> <body>     <h1>ビデオストリーミング</h1>     <video src="./mov_hts-samp005.mp4" controls width="320" height="240"></video> </body> 保存したHTMLをダブルクリックしてブラウザから見ると、このように動画がブラウザ上で再生できるようになります。   監修してくれたメンター メンター三浦さん モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイトのトップに動画を入れているサイトも増えてきているので、トレンドを抑えるためにも役立つ知識になるでしょう。   目次動画をHTML5に埋め込む方法YouTubeの動画をHTML5に埋め込む方法実際に書いてみよう執筆してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   動画の埋め込み方法 動画を埋め込むためのHTMLのタグには、下記の2つがあります。 ifarmeタグ videoタグ 各々のメリットや使い分けの方法を解説します。   iframeタグ 最も簡単に埋め込むだけであれば、<ifarme>タグを用いるのが一般的です。 <iframe>タグは作成しているページに別のURLにあるコンテンツを埋め込んで表示する際に、汎用的に利用できるタグです。 ですので、動画だけではなく、別サイトのコンテンツ全体を読み込むこともできます。 動画の場合は、<iframe>を使うと大きさからURLまで設定でき、ホームページにアップロードしている動画だけでなく、「YouTube」にアップされている動画を埋め込むことができます。   videoタグ HTML5から実装されたのが<video>タグです。 これは、今までの<iframe>タグにはなかった「loop」や「autoplay」といった機能が実装できます。 「loop」指定で動画を継続的に再生したり、「autoplay」を指定すると表示と同時に自動的に再生が開始します。 さっそく上記2つのやり方を見ていきましょう。   大石ゆかり videoタグって何でしょうか？ 田島悠介 HTML5から追加された、動画のためのタグなんだ。 大石ゆかり YouTubeの動画を自分のサイトで使う時は、iframeタグで書いてたんですけど。 田島悠介 そうだね。ただ、動画専用のタグだと、いろいろな用途に使うことができるんだ。とりあえず、簡単に書いてみよう！   実際に書いてみよう 実際にソースコードを書いてみて、Webブラウザで確認をしましょう。 動画を準備して、同じ階層においてください。 試す場合には、下記の「sample.mp4」の部分を自分のビデオファイルと同じ名前にしましょう。   iframeタグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <iframe width="560" height="315" src="sample.mp4" frameborder="0" allowfullscreen></iframe> </body> </html> 上記の例では、frameborderで動画の外枠の幅を指定したり、allowfullscreenを指定すると全画面モードにすることを許可します。   videoタグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <video controls autoplay loop><source src="sample.mp4"></video> </body> </html> 上記の例では操作コントローラーを表示し、自動再生してループ再生する指定になります。 今日のHTMLコーディングでは、インラインフレームが使用できないようなページが増えているので、<video>タグを使うのが良いでしょう。 インラインフレームはクラッカーと呼ばれる悪い人たちによって、ホームページに悪意ある改ざんがされやすい要素だからです。 <iframe>はいわば別のページを表示する仕組みですので、別ページを表示できるHTMLの構造自体を廃止してしまうという動きがあります。 今から組む方は<video>タグで挑戦してみましょう。 またホームページの中には<iframe>が使用できないところもあるので、気を付けておきましょう。   大石ゆかり ブラウザで見たところ、どちらも変わりないですね。 田島悠介 確かにそうだね。 大石ゆかり videoタグ特有のことってないんですか？ 田島悠介 動画をページの背景につかったり、オリジナルの再生ボタンを作れたり、コマ送り表示とかプログラミングと親和性が高いんだ。 大石ゆかり 難しそうだけど、面白そうですね！   [PR]
HTML

HTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】

HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数の動画切り替えを実行する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 動画を再生するには 複数の動画を切り替えるには 複数の動画を切り替えてみよう   動画を再生するには HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。 <video src="./video.mp4"></video> videoタグについて詳しくは以下の記事をご覧ください。 HTML5のvideoタグで動画のストリーミング配信の仕方を現役デザイナーが解説【初心者向け】   [PR] Webデザインで副業する方法とは複数の動画を切り替えるには さて、先ほど紹介した方法だと動画を一つしか再生できませんが、ここから複数の動画を動的に変更させるためにはどうすればいいのでしょう？ まず真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、videoタグのsrc属性が再生する動画ファイルを指定しているので、src属性の値を変えるためにJavaScriptを使う方法があります。 簡単に手順をまとめると以下のようになります。 Videoタグにidをもたせて、動画を再生するファイルgetElementByIdメソッドでVideoタグを取得できるようにする ボタンなどでgetElementByIdメソッドを実行し、srcの値を変更する関数を入れる ボタンには関数に渡す引数の値をつけておく 大体このような手順です。実際にサンプルを動かしながら実装方法をみていきましょう。   複数の動画を切り替えてみよう それでは実際にサンプルを動かしてみましょう。以下のサンプルHTMLを適当なフォルダに保存します。動画ファイルはHTMLと同じ保存先に保存しましょう（mp4推奨）。動画のファイル名はサンプルを参考に適宣変えてください。 なお、手元に再生できる動画が無い方は以下のリンクのサイトの動画であればフリー素材の動画をダウンロードできます。 https://pixabay.com/ja/videos/   <head>     <title>ビデオデモ</title>     <meta charset="utf-8"> </head> <body>     <h1>ビデオストリーミング</h1>     <video id="movie" src="./1.mp4" controls width="320" height="240"></video>     <hr>     <h3>再生する動画を選択</h3>     <button onclick="playVideo(1)">1</button>     <button onclick="playVideo(2)">2</button>     <button onclick="playVideo(3)">3</button> </body> <script>     function playVideo(num) {         console.log(num);         tag = document.getElementById("movie");         switch (num) {             case 1:                 tag.src = "./1.mp4";                 break;             case 2:                 tag.src = "./2.mp4";                 break; case 3: tag.src = "./3.mp4"; break;         }     } </script> 実際にHTMLを保存したら、画像のような画面でボタンを押すと動画が簡単に切り替わります。ちなみに今回はposter属性を付けませんでしたが、poster属性も変わるようにしたいときも同様の方法で動画と一緒に切り替えることができます。     監修してくれたメンター メンター 三浦 モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。 好きな言語はpython, Node.js   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】