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

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

画像アップロードやYouTube動画挿入機能付きHTMLエディタ for EC-CUBE4

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動画がはみ出さなくなります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です