• SIS Lab
    • >
    • Blog
    • >
    • YouTube埋め込みタグをレスポンシブ化する

YouTube埋め込みタグをレスポンシブ化する

更新日:2020.04.04 作成日:2014.09.03
#youtube #Design #jekyll

せっかくのレスポンシブデザインなので、YouTubeの埋め込みもレスポンシブ化してみた。

main.css

.youtubeWrapper{
position: relative ;
margin-top: 1.2em ;
margin-bottom: 1.2em ;
padding-top: 69px ;
padding-bottom: 50% ;
overflow: hidden ;
}

.youtubeWrapper iframe {
position: absolute ;
top: 0 ;
left: 0 ;
height: 100% ;
width: 100% ;
}

default.html

<div class="youtubeWrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/PRI0bA5VSL8" frameborder="0" allowfullscreen></iframe>
</div>

以下は、レスポンシブ化されたYouTube埋め込みタグです。

参考

「埋め込み動画のサイズをレスポンシブにする方法」 | 有限会社ワイバーン

B! Pocket

Related contents

TECH

2014.12.13

Jekyllのタグとカテゴリを整理するために、一覧表示するWebアプリ(個人用)をつくった

TECH

2014.12.02

Jekyllに月別アーカイブを実装する

TECH

2014.12.01

Jekyllにタグクラウドを実装する

TECH

2014.11.29

UTF-8-MACとは何か？〜Jekyllのカテゴリ(タグ)ページで濁点を含むページが表示されない〜

TECH

2014.11.25

Macのsedで改行コードを出力させる 〜改行コードの違い再確認〜

TECH

2014.10.29

JekyllでPygmentsを使ってのシンタックスハイライト

TECH

2014.10.21

Jekyllでページ分割する -pagenation-

TECH

2014.06.24

JekyllのFront matterを抽出する