YouTubeなどの動画インラインフレームをレスポンシブ対応にする
タイトルの通りですが、たまにクライアントワークで登場するので備忘録としてメモ。YouTubeなどの動画に限らず、アスペクト比が16:9のワイドになっているインラインフレームに使えるかと思います。コードは以下のとおり。
【HTML】※一部省略
<div class="yt-responsive"> <iframe src="**********" frameborder="0" allowfullscreen></iframe> </div>【CSS】
.yt-responsive{ position:relative; width:100%; padding-top:56.25%; } .yt-responsive iframe{ position:absolute; top:0; right:0; width:100% !important; height:100% !important; }過去記事で「インラインのグーグルマップをレスポンシブ対応にする」にも似たような形で紹介しましたが、ここではpadding-topの値を調整することで、アスペクト比に合わせています。4:3などの場合は適宜変更します。 (参考にさせて頂いたサイト) WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories