ランディングページにYouTube

トピック

HOME
フォーラム
Lightning
ランディングページにYouTube

このトピックには6件の返信、3人の参加者があり、最後にパンチにより1年、 1ヶ月前に更新されました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)

投稿者

投稿
2019年4月17日 11:08 午前 #15916

パンチ
参加者

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

2019年4月17日 11:16 午前 #15917
DRILL LANCER
モデレーター
私は下記の様にして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%;
}
```
2019年4月17日 4:31 午後 #15922

kurudrive
キーマスター

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

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

2019年4月18日 12:36 午後 #15941

DRILL LANCER
モデレーター

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

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

2019年4月19日 2:22 午前 #15955
kurudrive
キーマスター
あ、えーっとですね、実はLightning側にYouTube、GoogleMap、vimeo の iframeをレスポンシブで良きに計らうjsがついているので、表示領域よりも大きい width を設定するとたぶん大丈夫だと思います。

※URLだけ貼り付ける方式だと上記jsは動作しません。HTMLブロックでiframeタグを入力してください。
- この返信は1年、 1ヶ月前にVektor,Incが編集しました。
2019年4月19日 5:32 午前 #15956

DRILL LANCER
モデレーター

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

2019年4月22日 9:37 午後 #16038

パンチ
参加者

なるほど！Youtube BOXではなく昔の貼り方ですね！わかりました、ありがとうございました！！
投稿者

投稿