本日のポイント

コーディングを進めましょう！

【SNSの埋め込み方について】【動画の埋め込みタグについて】

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む

作品タイトル　ぼく私は

制作時間　30分

企画意図 ユーチューブのバナー　

要望　写真の犬をかわいく見せて

使用ツール　photoshop

実技 WEBページ制作実習③

-本日のアジェンダ-

1限目
実技 WEBページ制作実習③
SNSの埋め込みについて

2限目
実技 WEBページ制作実習③
WEBページ制作

3限目
実技 WEBページ制作実習③
WEBページ制作

4限目
実技 WEBページ制作実習③
課題制作

5限目
実技 WEBページ制作実習③
課題制作

本日のポイント

コーディングを進めましょう！

【SNSの埋め込み方について】

埋め込み例
https://samplesdl.me/training_html-css/sns.html

【動画の埋め込みタグについて】

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①IFRAMEタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

本日の課題

今日できたところまでのサイトをサーバにアップしましょう