HTMLスキル - 第7章 チャレンジ

youtube動画を使った、映画情報サイトを作ろう!(解説)

youtube動画を使った、映画情報サイトを作ろう!

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

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

youtube動画を使った、映画情報サイトを作ってみましょう。




チャレンジ内容


・Youtube動画を埋め込むことができるかどうか




Youtube動画を埋め込む方法

Youtube動画を埋め込む方法を見ていきましょう。
まず、インターネットで埋め込みたい動画のページを開き、共有をクリックします。
埋め込みコードが出てきたら、コードをコピーして作業用ファイルに戻ります。



<!-- ここにyoutube動画 -->
の部分にコピーしたコードを貼り付けてください。



<iframe width="600" height="315" src="https://www.youtube.com/embed/Yn6Jjcbf0aw" frameborder="0" allowfullscreen></iframe>



一度保存してブラウザで見てみましょう。
動画は表示できていますが、横幅が小さくなってしまっているので、<iframe>タグの中のwidthの値を600に変更します。
この作業を繰り返し、3つの動画すべてを埋め込みましょう。




<iframe width="600" height="315" src="https://www.youtube.com/embed/R-YE6atwYhE" frameborder="0" allowfullscreen></iframe>


<iframe width="600" height="315" src="https://www.youtube.com/embed/3enCxOaRht4" frameborder="0" allowfullscreen></iframe>




次に、「公式サイトを見る」をクリックした時に新しいタブで開くようにしたいと思います。
<a>タグにtarget属性を追加し、値を_blankにします。



<a href="#" target="_blank">公式サイトを見る</a>



保存してブラウザで見てみましょう。
リンクをクリックしたときに新しいタブで開くことができれば成功です。



今回、Youtube動画の埋め込みで、このような動画サイトが完成しました。