ヤフーショッピングにyoutube動画を埋め込む方法で、トリプルに1つのiframe用のHTMLアップするだけの方法
ヤフーショッピングにyoutubeにアップした商品の動画を埋め込みたい場合は、
トリプルを使うと思います。
そして、トリプルサーバーにvideo.htmlなどのファイルを作って
その中に埋め込みコードを入れて、
そのvideo.htmlを実際のヤフーショッピングの商品ページなどでiframeで読み込むという流れになります。
でも、
商品が沢山あって、それらの商品全部に動画を作ってyoutubeにアップしたのを埋め込む場合、
それぞれの商品のyoutube動画用に、違うhtmlファイルをつくってやるのはとっても面倒です。
そこで、１つのyoutube埋め込み用のhtmlを作って、
あとは、ヤフーショッピングの商品ページに埋め込むときにだけ、youtube動画の個別のコードを入れ替えるだけで
表示させる方法をとりました。
これが、本当に便利なんですよ！！
クライアントさんが、スマホなどで簡単に動画を撮って、
youtubeにアップして、それを商品ページに埋め込む場合、
HTML作成やFTP作業をさせなくてもいいんです。
まず、トリプルサーバーに以下の内容のhtmlを作ってアップしておきます。
ファイル名はmovie.htmlでもなんでも大丈夫です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<style type="text/css">
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function()
{
var v=location.search.replace("?v=","");
//console.log(v);
if( v.typeOf == undefined && v.length == 11 )
{
$('body').append('<iframe id="youtubeVideo" width="760" height="428" src="http://www.youtube.com/embed/'+v+'" frameborder="no" allowfullscreen></iframe>');
}
});
</script>
</body>
</html>
↑これをトリプルにアップさせておくだけで、動画ごとにhtml作らなくていいのです。
そして、
実際に掲載するヤフーショッピングの商品登録ページなどのフリースペースに以下を記載してください。
<iframe src=”http://shopping.geocities.jp/ショップID/movie.html?v=ユーチューブのビデオID” frameborder="no″ scrolling=”no” width=”760″ height=”440″></iframe>
ユーチューブのビデオIDというのは、youtubeの各動画のURLの部分の、 V= より後ろの部分のことです。
これで、あとは動画ごとに以下の変更部分を書き換えるだけで、いろんな動画を埋め込むことが可能になります！！
<iframe src=”http://shopping.geocities.jp/ショップID/movie.html?v=ユーチューブのビデオID” frameborder="no″ scrolling=”no” width=”760″ height=”440″></iframe>
ではでは！！
関連記事はこちら！
スポンサーリンク
ポチッ☆とクリックお願いします！
↓ ↓ ↓
