動画をモックアップにのせてみよう！

こんにちは！　吉田です！

今日は
コーディングの
実践動画です！！

内容は…

動画を
モックアップに載せて
再生できるように
コーディングする

です！

具体的には

YouTube動画を
PCのモックアップに載せて
再生させてみよう。

そして
レスポンシブ対応
（スマホ対応）
させてみよう。

という内容です！

web業界は今、
動画コンテンツが
絶頂期でして

僕らも日常生活で
おそらく1日１回は
何かしらの動画を
目にするようになりましたよね。汗

それに伴って、
情報商材の販売などはもちろん..

無料動画セミナーに
誘導するタイプの
見込み客獲得ページや

コンテンツとしての動画も
かなり一般的になりました。

（プロフィール動画や
ブランディング動画など）

実際、実務でも
動画を使うことも
かなり多くなってきているので
知っておいて損はないと思います！

また別の機会にもやりますが
実は今回ご紹介するレスポンシブの方法は
Google Mapでも使える万能な手段なので
ぜひマスターしていただければと思います！

■コーディング元ファイルはこちら↓
https://salesdesign-school.jp/mihon/video-on-the-mockup.zip

■YouTube動画はこちら↓
https://www.youtube.com/watch?v=1UEcNpmnOvc&t=5s
（個人的に３人目がアクセルの踏み方狂ってて推しです。）

■今回使ったモックアップ素材はこちら↓
https://jp.freepik.com/free-vector/open-modern-laptop-with-blank-screen-isolated-on-white_13830684.htm#query=pc&position=21&from_view=search

■iframeのレスポンシブ化についての参考
（padding-top:56.25%の意味など）
https://naeco.jp/iframe-responsive

ではでは！　よい週末を！

吉田