Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2018.06.01

YouTubeなどの動画インラインフレームをレスポンシブ対応にする

Tags: ,,

タイトルの通りですが、たまにクライアントワークで登場するので備忘録としてメモ。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対応にさせる方法

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?