0

私は画像ナビゲーションを持っていますが、クライアントは製品説明を介してビデオ アイコンを追加したいと考えています。

ここに画像の説明を入力

ユーザーがビデオ アイコンをクリックすると、メインの製品画像の上に YouTube ビデオがオーバーレイされます。それを隠してビデオを見せるだけのようなものです。

これを実行できるjqueryプラグインが見つかりませんか?

これは私が作成したマークアップの例です。アイコンの再生をクリックすると、画像の上の赤いボックス内で YouTube ビデオが再生されます。

私の例を見てください: http://jsfiddle.net/mC5c3/4/

HTML:

<div class="container">

<div class="product-image">
<img src="http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg" alt="http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg">
</div>

    <div class="image-nav">
    </div>

    <div class="icon">
        &nbsp
    </div>

</div>

CSS:

div.container
{
    margin:10px 10px auto;
    border:1px solid orange;
}

div.product-image
{
    height:220px;
    width:480px;
    border:1px solid red;  
    margin:30px;        
}

div.image-nav
{
    border:1px solid black;
    width:500px;
    height:100px;
    margin:30px;
}

div.icon
{
background-image: url("http://i.stack.imgur.com/zsQik.png");
    background-repeat: no-repeat;
    height: 50px;
    left: 540px;
    position: relative;
    top: -104px;
    width: 50px;
}

編集：

  1. アイコンのクリックに基づいている必要があります。
  2. アイコンのクリックに基づいて表示と非表示を切り替えます。
  3. クライアントがビデオを変更できるように、ビデオをアイコン div に埋め込む必要があります。

クリック イベントを追加し、ビデオのサイズを変更しました

var $video=$('<iframe width="480" height="220" src="http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0" allowfullscreen></iframe>');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

</p>

4

2 に答える 2

1 
var $icon=$('.icon');
var $video=$('.product-image iframe');
$icon.on('click',function()
{
    $video.toggle();//Shows the video if hidden, hides the video if visible.
});
于 2012-06-19T10:11:33.467 に答える
0

あなたはあなたのチューブAPIを使用してこれを行うことができます：

function play() {
  if (ytplayer) {
    ytplayer.playVideo();
  }
}

Read You Tube APIリファレンス：https ：//developers.google.com/youtube/js_api_reference？hl = fr-FR＃onYouTubePlayerReady

于 2012-06-19T10:37:42.643 に答える