動画がスマホで見切れないようコンテンツ幅にフィットさせる

埋め込みパーツを配置して動画のタグ記述に変更を加えることで、固定された動画の縦横サイズを変更しコンテンツ幅にフィットさせることができます。
この設定でスマホやタブレットなど各閲覧環境の縦横サイズをはみ出すことなく、縦横サイズに応じて表示させることが可能です。

メモ

関連リンク

YouTube動画から生成した埋め込みタグ内の埋め込み用URLをコピーする

YouTube動画の埋め込み用タグを生成する方法については、「YouTube動画を埋め込む（埋め込みパーツページ編集）」をご覧ください。

例：埋め込み用URL「https://～～～」の部分（反転部分）をコピーし、メモ帳などに控えておきます
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/FF-f1RbGPl8” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

例：コピー部分の抜き出し
https://www.youtube.com/embed/FF-f1RbGPl8

以下のコードを埋め込みパーツ内にコピペする

<div style="position: relative; padding-bottom: 56.25%;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/FF-f1RbGPl8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> </div>

上記コードのURL部分（「https://～～～」の部分）を手順1で取得した任意の埋め込み用URLで置き換える

注意

タグの入力は半角英数となるようご注意ください。
width=” “, height=” “, style=” “, src=” “などの属性値と呼ばれる記述の前後には半角スペースを入れる必要があります。半角スペースが無いとプログラム上不正となり正常な表示が行われない可能性があります。
タグの改行はあり・なしどちらでも構いません。

［設定する］をクリックする

コンテンツ幅にフィットした動画サイズとしての設定が完了しました。
［保存］をクリックして［プレビュー］アイコンをクリックすると、確認できます。