Embedボックスのレスポンシブ対応

埋め込んだ動画などの画角を保ったまま表示させる方法

STUDIO Support avatar
対応者:STUDIO Support
一週間前以上前にアップデートされました

Embedボックスで埋め込まれた要素の縦横比を固定で表示させる方法をご紹介します。

例) 16:9 の画角を保ったまま YouTube をきれいに表示させる

縦横比固定したまま表示させる方法

例) 1:1 の画角を保ったままVimeoをきれいに表示させる

1. 親 Box を作る
作成した親ボックスの横幅を指定すると、その値が動画の横幅の最大値になります。

2. 動画の縦横比と同じ比率の画像を用意し、タイプを img 選択、幅100%、縦autoで配置します

3. 親ボックスの中に絶対配置でEmebedボックスを配置し、 top: 0、 left:0、 right:0、 bottom: 0 に指定します

上記説明にて使用したYouTubeの動画(16:9)だけでなく、Vimeoの様々な比率の動画でも、同様の手順にて上手く表示させることができます。

こちらの回答で解決しましたか?