画像アップロードやYouTube動画挿入機能付きHTMLエディタでYouTube動画をレスポンシブ対応する方法です。
YouTube動画を商品説明に埋め込むとスマホで見た場合、以下のようにはみ出てしまいます。
![](https://i0.wp.com/blog.eccube-plugin.net/wp-content/uploads/2020/11/FireShot-Capture-286-EC-CUBE-SHOP-_-チェリーアイスサンド-localhost.png?resize=289%2C625)
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動画がはみ出さなくなります。
![](https://i0.wp.com/blog.eccube-plugin.net/wp-content/uploads/2020/11/FireShot-Capture-289-EC-CUBE-SHOP-_-チェリーアイスサンド-localhost.png?resize=289%2C625)