Могу ли я иметь 2 встроенных миниатюры видео YouTube рядом друг с другом, чтобы они могли нажать 1, и он расширяется?

Question

А увеличивается ли он до штатного размера?Я не хочу превышать размер 560 x 315, который у меня есть на данный момент.

По сути, у меня есть 2 видео на YouTube, и я могу успешно вставить одно из них, используя следующее:

 <iframe width="560" height="315" src="http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Но у меня есть второе видео на YouTube , которое я также хочу показать там, однако я не хочу занимать больше, чем ширина 560 или высота 315, поэтому я не хочу ставитьэто рядом с ним или под ним.Так что я надеюсь, что есть способ, например, получить миниатюру видео 1 шириной 250, а видео 2 шириной 250 рядом друг с другом.Затем, когда клиент нажимает на видео1, например, оно масштабируется до обычного уровня - 560 x 315. Когда видео заканчивается, оно уменьшается до размера миниатюры, 250 ширины.Это даст клиенту возможность просматривать и щелкать / просматривать видео на YouTube 2.

Возможно ли это, и если да, может ли кто-нибудь объяснить, как я могу это сделать?Любое руководство в этом отношении будет с благодарностью!Спасибо большое !!

Answer 1

Вы добавляете идентификатор в свой iframe, затем создаете 2 миниатюрные изображения и используете событие onclick изображения для запуска кода, подобного.

document.getElementById("iframeId").src = "http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque"

Я думаю, что есть возможностьЗапустите автоматическое воспроизведение на YouTube, добавьте также.

Хорошо, я обновил ваш образец здесь http://jsfiddle.net/jLcpH/6/

HTML-код

<iframe id="ShowFrameID" width="270" height="152"            
     src="http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque">
</iframe>

<a href="#" onclick="cShowMe(1); return false;">
    <img id="natgeo1" width="270" height="152"  
       src="../images/natgeothumb1.jpg" border="0" /></a>

<a href="#" onclick="cShowMe(2); return false;">
    <img id="natgeo2" width="270" height="152" 
       src="../images/natgeothumb2.jpg" border="0" /></a>​

и код JavaScript.

function cShowMe(WhatToShow)
{
    var TheIframe = document.getElementById("ShowFrameID");        
    // I change the src with a number code because is small to pass as variable
    //  and you have only 2 different video to show.
    if(WhatToShow == 1)        
     TheIframe.src = "http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque" ;
    else
     TheIframe.src = "http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque" ;            
}