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

こんにちは！　吉田です！

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

内容は…

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

です！

具体的には

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

ではでは！　よい週末を！

吉田

投稿者プロフィール

吉田 祥太

フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。

ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。

⇒ 詳しいプロフィールはこちら

最新の投稿

この著者の記事一覧

• 記事2023年12月25日【成果続々！】おめでとうございます！
• 記事2023年12月20日「強みがない」デザイナーの生存戦略
• 記事2023年12月4日ガクブルしながら選ばれるデザイナーになろう
• 記事2023年11月27日サービスや営業メールを強くする泥臭い秘訣