HTMLスキル - 第7章 Lesson6

youtube動画をサイトに埋め込む方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

youtube動画をページ内で再生できるよう、埋め込みサービスを利用して表示させる方法について、初心者向けに解説しています。



この動画で学べること

・YouTubeにアップした動画をWebページに埋め込む方法



YouTubeにアップした動画をWebページに埋め込む方法

<iframe>タグは、Webページにフレームを作って、外部のWebサイトや動画を埋め込むことができるようになります。
また、width属性やheight属性でサイズを指定したり、frameborder属性で境界線を追加したりもできます。



では、その<iframe>タグの使い方をご紹介します。
まず、YouTubeで埋め込みたい動画を開き、動画の下にある「共有」をクリックします。
そのなかにある埋め込みコードをコピーしてください。
練習用ファイルの、<!-- ここにyoutube動画をのせる-->とコメントアウトしてある所に、埋め込みコードを貼り付けます。



<iframe width="560" height="315" src="<a href=" https:="" www.youtube.com="" embed="" 2ao5b6uqi40"=""><a href="https://www.youtube.com/embed/2Ao5b6uqI40">https://www.youtube.com/embed/2Ao5b6uqI40</a>" frameborder="0" allowfullscreen></iframe>




これだけで、YouTubeの動画を簡単に埋め込むことができます。
保存してブラウザで見てみると、指定したYouTubeの動画が表示されました。