youtube レスポンシブル
お世話になっております。
youtubeをサイズ指定して貼り付けると、
スマホでは大きく表示され、デザインが崩れてしまいます。
レスポンシブル対応するにはどうしたらよいでしょうか？
よろしくお願いします。
商品詳細ページにて設定するYoutube動画の設定であれば「幅320px高さ180px」を選択することでスマートフォンサイズでも表示幅に合わせてデザインを崩さず表示されます。
今回お問い合わせ頂いたのは、商品詳細ページではなく、ページレイアウト管理（デザイン設定＞レイアウトタブ）にてフリーパーツを使ってページ内にYoutube動画を配置した内容かと認識致します。
この場合、レスポンシブ対応となるスタイルの用意がございませんので、配置するYoutubeに対し特定のclassを充て、それに対しスタイルを追加して頂く必要がございます。
手順を以下に案内致します。
1.Youtubeの埋め込み用コード<iframe>内の幅・高さの指定（width="○○" height="●●"）を削除します。
2.classを指定した<div>で<iframe>を囲います。
例：<div class="youtube"><iframe src="・・・"></iframe></div>
その後、フリーパーツを保存します。
3.以下の様なスタイルを追加します。
※通常、幅560高さ315。画面幅が700px以下の時に幅320高さ180となるスタイルのサンプルです。
※数値についてはサンプルでございますので、ご利用の際、お好みの数値で調整して下さい。
<style>
.youtube iframe {
width: 560px;
height: 315px;
}
@media only screen and (max-width: 700px) {
.youtube iframe {
width: 320px;
height: 180px;
}
}
</style>
スタイルは以下の方法で追加して下さい。
店長ナビトップ > デザイン設定 > [レイアウト]タブ でページレイアウト管理を表示
スクリーンの設定ボタン(ギアアイコン)をクリック
[<head>追加]内に内容を追記して「保存」をクリック
最後にショップページを閲覧して表示をご確認下さい。
以上を参照いただきお試し下さい。
Re: youtube レスポンシブル
大変綺麗に設定できました！
ありがとうございました。