cssでyoutubeを横並びにレイアウトする方法

ソースコード

<style>
.palent {
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:800px;
  margin: 0px auto;
}

.child {
  text-align: center;
  width: 400px;
}

.child > iframe {
  width: 320px;
  height: 180px;
}

.video_title {
  padding-top: 15px;
  padding-bottom: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
</style>

<div class="palent">
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
</div>

<div class="palent">
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
</div>

サンプル

こんな感じで段組み表示できる。

動画サイズをiframeで調整する。
横×縦=16:9で設定する。

コメント

タイトルとURLをコピーしました