画像アップロードやYouTube動画挿入機能付きHTMLエディタでYouTube動画をレスポンシブ対応する方法

画像アップロードやYouTube動画挿入機能付きHTMLエディタでYouTube動画をレスポンシブ対応する方法です。

YouTube動画を商品説明に埋め込むとスマホで見た場合、以下のようにはみ出てしまいます。

YouTube動画の埋め込みをレスポンシブ対応する

管理画面のコンテンツ管理＞CSS管理に以下のコードを入力してください。

.youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

管理画面のコンテンツ管理＞JavaScript管理に以下のコードを入力してください。

$(function () {
  const iframeWrap = $('<div class="youtube"></div>');
  $('iframe').wrap(iframeWrap);
});

以上でYouTube動画がはみ出さなくなります。