play icon youtube video div overlay

I have an image nav but the client wants to add a video icon via the product description.

When the user clicks on the video icon it should overlay the youtube video on top of the main product image. Kinda like hiding it and just showing the video.

I cannot find any jquery plugin that can do this?

Here is some example markup which i have created, when you click play on the icon i want the youtube video to be played inside of the red box on top of the image.

Look at my example: 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;
}

edit:

  1. It should be based on the icon click.
  2. and show and hide based on the click of the icon.
  3. The video needs to be embeded in the icon div so the client can change the video.

I added a click event and resized the video

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);
});

‚Äč

Answers


var $icon=$('.icon');
var $video=$('.product-image iframe');
$icon.on('click',function()
{
    $video.toggle();//Shows the video if hidden, hides the video if visible.
});

You can do this using you tube api:

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

Read You tube API reference: https://developers.google.com/youtube/js_api_reference?hl=fr-FR#onYouTubePlayerReady


Need Your Help

Functional reactive operator for custom filter based on another Observable

javascript reactive-programming rxjs bacon.js

For fun and to learn I'm trying to implement an undo system in my app using functional reactive programming. I have a stream of state changes, which need to be saved onto the undo stack. When the u...

Making a django application running on 127.0.0.1:8000 accessible everywhere?

python django web-services

I only have ssh access to a server. It is ubuntu from amazon aws. I have uploaded my django project to it. When I run the command python manage.py runserver or any variants of it, the server starts...