[ 解決済 ] ランディングページにYouTube

[VWSカスタマー参加者]

ランディングページにYouTubeを貼り付けると、片方に寄ってしまいサイドバー部分が空白になります。フルサイズ、もしくは任意サイズでセンター寄せにしたいのですがお知恵拝借できれば幸いです。

[RICK参加者]

私は下記の様にしてYouTubeの動画を貼り付けています。
ちなみに、カラム内フルサイズです。

HTML

<div class="movie-wrap">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Q2CXPPPjC8k" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.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%;
}

[kurudrive参加者]

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q2CXPPPjC8k" frameborder="0" allowfullscreen></iframe>

widthhとheightを大きめにしておけば、自動的にサイズを縮小してくれないですかね？

[RICK参加者]

iframeは親要素の幅を無視して表示されるので、
レスポンシブにするには上記のようなCSSを組むか、
JSで対応するかしかないようです。

ちなみにvimeoでは貼り付けタグにもれなくレスポンシブ用のJSがついてくるようでした。

[kurudrive参加者]

あ、えーっとですね、実はLightning側にYouTube、GoogleMap、vimeo の iframeをレスポンシブで良きに計らうjsがついているので、表示領域よりも大きい width を設定するとたぶん大丈夫だと思います。

※URLだけ貼り付ける上記jsっは動作しません。HTMLブロックでiframeタグを入力してください。

[RICK参加者]

ああ、そういうことでしたか。勘違いしてすみません。

[投稿者]

投稿