cssでyoutube埋め込みを横並びにレイアウト

スポンサーリンク

cssのFlexboxで横並びレイアウト

サンプルはこちら。
youtubeの埋め込みを横並びで表示させる。

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

ソースコード

<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>

親要素と子要素でfrex指定

親要素(コンテナ)
子要素(アイテム)

<div class="f-container">
  <div class="f-item"></div>
  <div class="f-item"></div>
  <div class="f-item"></div>
</div>

親要素にdisplay:flexを指定

.f-container{
display:flex;
}

flex-direction
アイテムの並び順を指定する

row:左から右へ
row-reverse:右から左へ
column:上から下へ

flexboxやその他cssの使い方の解説本

html・css
スポンサーリンク
のんびりブログ

コメント

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