Shopifyの商品ページの説明の中に、Youtube動画を表示させたい時があります。
ここでは簡単に商品説明欄にYoutube動画を設定する方法を解説いたします。
目次
Shopify商品ページにYoutube動画を挿入・設定する方法
〉ステップ1: ホーム画面を開き、左メニュー「商品管理」を開く
〉ステップ2: 商品編集画面の説明＞エディター右側「</>」のマーク
① Shopify商品ページにYoutube動画を挿入・設定する方法
〉ステップ1: ホーム画面を開き、左メニュー「商品管理」を開く
Shopify 管理画面へのアクセスURL：https://admin.shopify.com/store/{shop名}となります。
もしくは、https://admin.shopify.com/login からアクセス下さい。
管理画面にログイン後、下記の通りお進みください。
管理画面＞商品管理（画面の左）
〉ステップ2: 商品編集画面の説明＞動画マークをクリック
動画を挿入するには、エディターから「▷」のマークで「動画を挿入」をクリックします。
管理画面＞商品管理＞商品編集画面の説明＞エディター右側「▷」のマーク
〉ステップ3: Youtubeの埋め込みコードを挿入します。
Youtubeの動画の「共有」から「埋め込む」を選択し、埋め込みコードをコピーし、
Shopifyの商品説明欄の「動画を挿入」に貼り付けて保存します。
「共有」の埋め込みコードで発行されるコードの動画URLの末尾に「?rel=0」を書き込むと他の関連動画が非表示となり、自身のチャンネルの関連動画のみ表示されるようになります。
※尚、2024年現在の内容です。Youtubeの仕様変更になる可能性もあります。
<iframe title=”YouTube video player” src=” 動画のURL ?rel=0″ height=”315″ width=”560″ allowfullscreen=”” allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” frameborder=”0″></iframe>
〉ステップ4: モバイルでも正しく表示されているかご確認下さい。
※通常、Shopifyの商品ページの動画埋め込みは、モバイルのどの機種でもサイズに対応しています。
万が一、モバイルで見た時、動画が画面からはみ出ていた場合は、埋め込みコードのソースをHTMLで下記に書き換えてみて下さい。
オンラインストアのページ制作の際にスマホ画面から見切れていたことがあったので、貼り付けておきます。
<div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;”><iframe src=” 動画のURL “ style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” frameborder=”0″ allowfullscreen=””></iframe></div>
こちらはYoutubeの埋め込みのデフォルトコードです：
<iframe width=”560″ height=”315″ src=” 動画のURL ” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
