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

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

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

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

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

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

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

設定方法

（1）divで囲む

【商品管理】>【商品の設定】>【商品の登録】「スマートフォン用の商品詳細内容入力」や
【独自デザイン（スマホ）】>【スマホデザインの設定】> 適用中のスマホテンプレートの「編集」をクリック【トップ画面】へ

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動画】をスマホでもきれいにみてもらえるように設定してみましょう！

それではまた！