こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はスマホの”商品詳細ページ”や”トップページ”に埋め込んだ【YouTubeの動画】をレスポンシブにする方法をご紹介します！

こんなお悩みありませんか？

・埋め込んだYouTubeをスマホで見るとはみだすので、はみださずにレスポンシブで表示したい

スマホで埋め込んだ【YouTube動画】をレスポンシブにしたい

【YouTube動画】を埋め込む方法は、商品の魅力をもっと伝えたい！【YouTube動画】を埋め込む方法！をあらかじめご参照ください。それでは早速、みていきましょう！

設定方法

（1）divで囲む

ベーシックモードの場合

商品管理 / 商品一覧 / 商品登録　「商品説明」または「商品追加説明」
トップページの場合は
ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / トップページ編集
「HTML編集」欄

クリエイターモードの場合

商品管理 / 商品一覧 / 商品登録　「商品説明」または「商品追加説明」
トップページの場合は
ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「HTML」欄

YouTubeの埋め込み用ソースをdivで囲みます。

<div class="item-movie">
<!-- ここに埋め込み用ソースを記述します。-->
</div>
（2）CSSを追加

ベーシックモードの場合

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / 共通CSSページ編集
「CSS編集」欄

エディターエリア内に下記を追記します。

.item-movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.item-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう。
・商品詳細ページにのみYouTubeを埋め込んでいる場合は、
ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / 商品詳細ページ編集　 内の「CSS編集」エディターエリア内に追記しても問題ありません。

クリエイターモードの場合

・商品説明
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄
・トップページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄

エディターエリア内に下記を追記します。

@media screen and (max-width: 768px) {
.item-movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.item-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
}

・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう。

完了！

右はじが切れて表示されていた【YouTube動画】が画面内におさまってレスポンシブに対応させることができました！

YouTube動画

・YouTubeは、makeshopのシステムに関係なくご利用いただけます。
ショップ様でご判断のうえ、ご利用ください。
・2020年9月時点のご紹介記事となります。

いかがでしたでしょうか。
商品の魅力をより伝えることができる【YouTube動画】をスマホでもきれいにみてもらえるように設定してみましょう！

それではまた！