youtubeの貼り付け

解決済 ioxrxogi
(@ioxrxogi)

7年、 2ヶ月前
youtubeの貼り付けがうまくいきません。

レスポンシブにしたくて、
いろいろなサイトで紹介されている方法で貼り付けたのですが、
画像の下にpadding?のために間ができてしまいます。
```
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
```
テーマは、オリジナルです。
試しに、Twenty Seventeen、Twenty Sixteenはダメで、なぜかOxygenは設定しなくてもできました。

なにかチェックするポイントがあれば教えてください。

9件の返信を表示中 - 1 - 9件目 (全9件中)

CG
(@du-bist-der-lenz)

7年、 2ヶ月前

padding-bottom: 56.25%;padding-top: 30px;
上下の指定に余白（padding）があるためでしょう。paddingよりもbox-sizingが良いでしょう。
しかし、Twenty Seventeen では動画フォーマットが可変レイアウトにできるので便利です。
トピック投稿者 ioxrxogi
(@ioxrxogi)

7年、 2ヶ月前
Du bist der Lenzさん、ありがとうございます。

あまり理解できてないのですが、
```
	padding-bottom: 56.25%;
	padding-top: 30px;
```
と設定することで、iframeのレスポンシブ化しているみたいなのです。

これらが紹介されているサイトでは、paddingによる余白はでていませんでした。
CG
(@du-bist-der-lenz)

7年、 2ヶ月前

Twenty Seventeen では P タグに、margin-bottom が効いているからでしょう。その上に、padding が加算されるので余白が広がるのでしょう。

こういう感じでどうでしょう。動画フォーマットでの投稿に限り、margin-bottom を打ち消してみました。

http://wordpress.woodstock.work/twenty-seventeen/the-janiculum/

トピック投稿者 ioxrxogi
(@ioxrxogi)

7年、 2ヶ月前

Du bist der Lenzさん、ありがとうございます。

素のままでTwenty Seventeen貼り付けると、一見レスポンシブっぽいのですが、
ブラウザの幅を縮めると縦が縮小しなくなるのです。

できているサイトがあるのに、なぜにできないか不思議です。

CG
(@du-bist-der-lenz)

7年、 2ヶ月前

それはiframeのアスペクト比が保持されているからでしょ

トピック投稿者 ioxrxogi
(@ioxrxogi)

7年、 2ヶ月前

Du bist der Lenzさん、ありがとうございます。

なので、質問のコードを記載してそれを回避しているようなのです。

紹介しているサイトでは、わたしが出ているような問題は無いようなのです。

オリジナルテーマにだけ出ているのならいいのですが、
そうでないものも同じ現象なものですから、

どうしたものかと思案しています。

ishitaka
(@ishitaka)

7年、 2ヶ月前

こんにちは

padding-top を 0 にすればいいのでは。
あと動画のアスペクト比が 16:9 ではない場合、padding-bottom の 56.25%（9/16*100=56.25）値も変更する必要があります。
nobita
(@nobita)

7年、 2ヶ月前
こんにちは、
```
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
max-width:100%;
max-height:100%;
}
```
のように、親のブロック内に収まるように、max-width,max-heightを追加するといいと思います。

個人的なメモ

http://tenman.info/labo/snip/archives/6821
- この返信は7年、 2ヶ月前にnobitaが編集しました。
トピック投稿者 ioxrxogi
(@ioxrxogi)

7年、 2ヶ月前

ishitakaさん、ありがとうございます。

そうですね。
最初、検索したときは75%（4:3）ていうのがあって、
今の映像の主流が16:9ということで56.25%に設定しました。

nobitaさん、ありがとうございます。

うまくいきました。

みなさん、ありがとうございます。

9件の返信を表示中 - 1 - 9件目 (全9件中)

トピック「youtubeの貼り付け」には新たに返信することはできません。

トピックタグ

表示