Embedボックスで埋め込まれた要素の縦横比を固定で表示させる方法をご紹介します。
例) 16:9 の画角を保ったまま YouTube をきれいに表示させる
縦横比固定したまま表示させる方法
1. 親 Box を作る
作成した親ボックスの横幅を指定すると、その値が動画の横幅の最大値になります。
2. 動画の縦横比と同じ比率の画像を用意し、タイプを img 選択、幅100%、縦autoで配置します
3. 親ボックスの中に絶対配置でEmebedボックスを配置し、 top: 0、 left:0、 right:0、 bottom: 0 に指定します
上記説明にて使用したYouTubeの動画(16:9)だけでなく、Vimeoの様々な比率の動画でも、同様の手順にて上手く表示させることができます。