show hide youtube video on click

Question

Q1) На загрузке страницы можно с Jquery проверить имя файла изображения, а затем установить css, чтобы разместить его на странице?

Q2) Что это самый простой способ справиться с этим, пользователь не будет встроить код IFrame внутри div.icon

У меня есть значок кнопки игра, которая будет в описании продукта в сайт электронной коммерции. Когда пользователь нажимает кнопку воспроизведения, он будет показывать видео в формате YouTube прямо в поле div продукта-изображения. Значок будет располагаться рядом с значками навигации изображения, чтобы пользователь мог видеть видео во время просмотра фотографий.

Это, кажется, работает хорошо, вот мой код:

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/

Answer 1

Для Q1 Ishan является Rigth вы можете использовать:

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

Для Q2: A YouTube-код для вставки выглядит следующим образом:

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

Вы можете попробовать использовать класс IFrame, чтобы выбрать его:

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

Тогда на событии загрузки, вы должны добавить некоторые JQuery того Gonne обертку каждый YouTube IFrame с значок делами. Я не уверен, но это может быть что-то вроде:

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

Надеется, что это поможет

-х