ホーム  >  CSS

YouTubeの埋め込み動画をレスポンシブ化する方法

公開日

最終更新日

カテゴリー CSS

HTML

<div class="yt_cont">
  <iframe src="https://www.youtube.com/xxxx/xxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
</div>

CSS(SCSS)

.yt_cont {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

 

カテゴリー:CSS

タグ:

関連投稿