YouTubeを幅いっぱい(width:100%)にする

2015年9月1日

YouTubeを埋め込む方法は前回記事で書いてありますので、その後の話
YouTubeの音を消して(ミュート)埋め込んで自動再生する

YouTubeのラップ用にinnerタグをを付けました。(書いててラップ用にinnerっておかしいなって思いましたよ。)

idのplayerってのはjsで書き換える部分です。

<div class="inner">
  <div id="player"></div>
</div>

そんな内容で下記cssを突っ込むだけ

.inner {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

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

実装結果

.inner {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

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

See the Pen VvwWxm by ziyudom (@ziyudom) on CodePen.