CODEWITHSUNDEEP
javascriptjquerycssxhtml
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

show hide youtube video on click

Q1) On page load is it possible with Jquery to check the file name of the image and then set the css to position it on the page?

Q2) What is the easiest way to manage this, the user will not be embedding the iframe code inside the div.icon

I have a play button icon which will be in the product description in an ecommerce website. When the user clicks play it will show the youtube video exactly inside the product-image div box. The icon will be positioned next to the image nav icons so the user has an option to see the video while browsing the pics.

It seems to work nice here is my code:

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">
      <iframe width="480" height="220" src=
      "http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0"
      allowfullscreen=""></iframe>
    </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://i46.tinypic.com/zmmbo8.png");
    background-repeat: no-repeat;
    height: 50px;
    left: 540px;
    position: relative;
    top: -104px;
    width: 50px;
    cursor:pointer;
}

div.icon iframe
{
    display:none;
    position:relative;
    top:30px;
}

div.product-image iframe
{
    position: absolute;
    top: 42px;
    left:42px;
}

JQ:

var $video=$('div.icon iframe');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

jsfiddle: http://jsfiddle.net/t7qMF/2/

Upvotes: 2

Views: 3452

Answers (1)

RTB
RTB

Reputation: 5823

For Q1 Ishan is rigth you can use: 

$('img[src="images/test.png"]').css("position","absolute");

For Q2: A youtube embed code looks like this:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

You can try using the iframe class to select it:

var $video=$('iframe.youtube-player');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

Then on the onload event you have to add some jquery thats gonne wrap every youtube iframe with your icon div. I'm not sure but this could be something like:

$(function() {
     $('iframe.youtube-player').each(function(){
         var $iconDiv = $(this).parent().append('<div class="icon"></div>');
         $(this).prependTo($iconDiv);
     });
});

Hope this help's

Upvotes: 1

Related Questions