-本日のアジェンダ-
1限目
学科 WEB動画基礎
YouTube利用について
2限目
学科 WEB動画基礎
WebサイトでYouTubeの 使い方について
3限目
学科 WEB動画基礎
課題作成
4限目
学科 WEB動画基礎
課題作成
5限目
学科 WEB動画基礎
課題作成
本日のテーマ
WebサイトでのYouTubeの活用法についてです。
YouTubeについて
YouTube ( ユーチューブ ) は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管(テレビ)」という意味である。
Youtubeパートナーシッププログラムについて
【資料】・・・DEAUアカデミー WEBデザイナー養成(午前)科 B教室 / 資料 /【5】運営 /「YouTubeパートナープログラムの手引き.pdf」
VIDEOとIFRAMEタグ
WEBサイトに動画を埋め込む方法は2つあります。
①iframeタグを使用する(youtubeなどの動画サイトから読み込む)
②videoタグを使用する(動画ファイルをアップロードして読み込む)
Dropboxの資料/運営/「動画基礎」 というフォルダをDLして下さい。
video.htmlがVIDEOタグで動画が埋め込まれているファイル、iframe.htmlがiframeタグが使用されてyoutube動画が埋め込まれているファイルです。
それぞれの記述の仕方・動作を確認してみましょう。
またiframe.htmlは練習用として使用してみて下さい。
ご自分でyoutube動画を埋め込んでみたり、またGooglemapもiframeタグが自動生成されますので、こちらも埋め込んでみましょう。
①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>
参考サイト
その他、埋め込みについては下記を参考に!
練習課題
オンライン期間中のコーディング練習
Dropboxの練習用ファイルで力をつけましょう!
ファイル場所・・・資料 /【4】コーディング / 「コーディング練習 」
【練習①】「cording_saito_20201001.zip」
PDFにある問題を解いてみましょう。
【練習②】「cording_nakano_20210902.zip」
JPEGのデザインラフを目指して、CSSの「プロパティ」と「値」を組みましょう。
・完成したものは訓練中の成果としてポートフォリオに載せていただいて構いません。
・画像やバナーの入れ替えなど、自由にアレンジを加えていただいても構いません。
・提出課題ではありませんのでご自身のペースで挑戦してみて下さい。
本日の提出物はありません。