皮革製造メーカーのWEB担当 ヒロです。
本日はヤフーストアのtips。
というよりかは、単なる自分のメモ書きです。
ヤフーショッピングの商品ページに、youtubeを張り付ける方法を解説します。
|
1 |
<!--Y youtube:vid=●●●●●● --> |
上記ソースの ●●●●●●を差し込みたい動画のコンテンツIDに差し替えます。
動画を見ている時に表示される、再生URLの末尾の部分です。
もっと分かりやすく説明します。
下記は米津玄師さんのLemonの動画です。
動画をyoutubeの画面で見ると分かりますが、再生URLが表示されているかと思います。
こちらがコンテンツURLになります。
|
1 |
https://www.youtube.com/watch?v=SX_ViT4Ra7k |
こちらの"SX_ViT4Ra7k"がLemonのコンテンツURLとなります。
コンテンツURLを差し込むとこのようになります。
|
1 |
<!--Y youtube:vid=SX_ViT4Ra7k --> |
ここまででソースの準備ができました。
差し込みの方法はいたって簡単、上記のソースをHTML可の領域にはりつけます。
- 商品説明
- PC用フリースペース1
- PC用フリースペース2
- PC用フリースペース3
確認できたでしょうか、横幅が150pxの動画が差し込まれたかと思います。
もう一度編集画面に行くと、下記のようなソースに自動変換されていることが分かります。
|
1 2 3 4 |
<div class="youtube" vid="SX_ViT4Ra7k"> <a target="_blank" href="https://www.youtube.com/watch?v=SX_ViT4Ra7k"><img src="https://i.ytimg.com/vi/SX_ViT4Ra7k/mqdefault.jpg" style="border:0;margin-bottom:2px;"></a><br> <a target="_blank" href="https://www.youtube.com/watch?v=SX_ViT4Ra7k" style="padding-left:18px;background:url('https://s.yimg.jp/images/store/shp/ic/favicon_youtube.png') no-repeat 0 -150px;">視聴ページへ(外部サイト)</a> </div> |
これで動画の差し込みは完了ですが、上記のソースに手を加えればさらに見た目よくなります。
簡単でなので是非やってみてくださいね(^^
