makeshopサポート │ スマホで埋め込んだ【YouTube動画】をレスポンシブにしたい【ベーシックモード】

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

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

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

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

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

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

設定方法

（1）divで囲む

ベーシックモードの場合

旧管理画面：【商品管理】>【商品の設定】>【商品の登録】「スマートフォン用の商品詳細内容入力」
トップページの場合は【ショップデザイン（スマホ）】>【スマホデザインの設定】適用中のスマホテンプレートの「編集」をクリック【トップ画面】「HTML編集」欄

新管理画面：メインメニュー / 商品管理 / 商品一覧 / 商品登録「商品説明」または「商品追加説明」
トップページの場合は
メインメニュー / ショップデザイン / テンプレート選択・編集
【ショップデザイン（スマホ）】>【スマホデザインの設定】適用中のスマホテンプレートの「編集」をクリック【トップ画面】「HTML編集」欄

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

旧管理画面：【商品管理】>【商品の設定】>【商品の登録】「商品説明」または「商品追加説明」
トップページの場合は【ショップデザイン】>【クリエイターモード】>【トップ】「HTML」欄

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

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

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

</div>

（2）CSSを追加

【独自デザイン（スマホ）】> 【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【共通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;
}

.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編集」エディターエリア内に追記しても問題ありません。

完了！

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

YouTube動画

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

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

それではまた！