video pop-up code?

[robertsaunders]

I am embedding a youtube video into a website. I want the embedded image/video to be small but for viewers to have the option to click on the image/video (or below) and watch the video in a larger size as a pop-up.

Can anyone tell me where I might find a code to enable this please?

Thanks in advance.

[molendijk]

Something like the following(?):
Head:

<script type="text/javascript">
function big_yt(yt_container,url)
{
document.getElementById(yt_container).innerHTML='<div style="position: absolute; left: 50px; top: 100px; right: 50px; bottom: 80px"><div style="position: relative; float: right; cursor: pointer" onclick="document.getElementById(\''+yt_container+'\').innerHTML=\'\'">CLOSE<\/div><br><iframe src="'+url+'" style="position: absolute; width: 100%; height: 100%" frameborder="0"><\/iframe><\/div>'
}
</script>
Body:

<div style="text-align: center">
<a onclick="big_yt('video_container','http://www.youtube.com/v/TjLCJKoot4U?version=3&amp;autoplay=1')"><img src="http://img.youtube.com/vi/TjLCJKoot4U/1.jpg" height="70" width="90" title="Cougar Scene" alt="" style="cursor: pointer"></a>
<a onclick="big_yt('video_container','http://www.youtube.com/v/1vrKeslu2KM?version=3&amp;autoplay=1')"><img src="http://img.youtube.com/vi/1vrKeslu2KM/1.jpg" height="70" width="90" title="Neanderthal" alt="" style="cursor: pointer"></a>
<a onclick="big_yt('video_container','http://www.youtube.com/v/Tek_i2d7bP4?version=3&amp;autoplay=1')"><img src="http://img.youtube.com/vi/Tek_i2d7bP4/1.jpg" height="70" width="90" title="Cro-Magnon" alt="" style="cursor: pointer"></a>
</div>
<div id="video_container"></div>
Arie Molendijk.

[jscheuer1]

There are also various 'box' type scripts that can do that sort of thing:

http://fancybox.net/

and:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

are two that can handle Flash video in various ways.

[robertsaunders]

Thank you for both of your replies. I'm not going to be updating the site for a week or so but I've had a look the posts and they look like exactly what I was looking for.

[sedjokas]

Something like the following(?):
Head:

<script type="text/javascript">
function big_yt(yt_container,url)
{
document.getElementById(yt_container).innerHTML='<div style="position: absolute; left: 50px; top: 100px; right: 50px; bottom: 80px"><div style="position: relative; float: right; cursor: pointer" onclick="document.getElementById(\''+yt_container+'\').innerHTML=\'\'">CLOSE<\/div><br><iframe src="'+url+'" style="position: absolute; width: 100%; height: 100%" frameborder="0"><\/iframe><\/div>'
}
</script>
Body:

<div style="text-align: center">
<a onclick="big_yt('video_container','http://www.youtube.com/v/TjLCJKoot4U?version=3&amp;autoplay=1')"><img src="http://img.youtube.com/vi/TjLCJKoot4U/1.jpg" height="70" width="90" title="Cougar Scene" alt="" style="cursor: pointer"></a>
<a onclick="big_yt('video_container','http://www.youtube.com/v/1vrKeslu2KM?version=3&amp;autoplay=1')"><img src="http://img.youtube.com/vi/1vrKeslu2KM/1.jpg" height="70" width="90" title="Neanderthal" alt="" style="cursor: pointer"></a>
<a onclick="big_yt('video_container','http://www.youtube.com/v/Tek_i2d7bP4?version=3&amp;autoplay=1')"><img src="http://img.youtube.com/vi/Tek_i2d7bP4/1.jpg" height="70" width="90" title="Cro-Magnon" alt="" style="cursor: pointer"></a>
</div>
<div id="video_container"></div>
Arie Molendijk.

Thanks for this code. Is it possible to play the video automatically (No need to click ) ???

[Beverleyh]

Isn't that what the autoplay=1 parameter in the URL is already doing?

[Beverleyh]

I had a look here and although the previous code works OK on destktop, it doesn't work on iOS - probably because the YouTube API has changed since 2012 when this solution was posted. Updated API docs here: https://developers.google.com/youtube/v3/getting-started

Try this updated alternative http://fofwebdesign.co.uk/template/_testing/video/youtube-popup.htm (responsive and works on iOS)

[molendijk]

A few remarks.
Yes, the YouTube API has changed since 2012 when my solution was posted.
Berverleyh's solution works OK.
The person wants the video to autoplay on page load, so we could do this (adapted to the new API, I guess, but I'm not sure as I dont't have a small device here; most of the time I'm disconnected in this isolated region of Europe, where (holiday-)life is so simple and beautiful):
HEAD:


<script type="text/javascript">
function big_yt(url)
{
var ifr_height=document.getElementById('video_container').clientHeight-20;
document.getElementById('video_container').innerHTML='<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-family: verdana; font-size: 13px; color: white; cursor: pointer"><div style="position: relative; float: right; height:20px" onclick="document.getElementById(\'video_container\').innerHTML=\'\'">CLOSE<\/div><br><iframe src="'+url+'" style="position: absolute; width: 100%; z-index: 1; height:'+ifr_height+'px" frameborder="0"><\/iframe><\/div>'
}
window.onload=function() {big_yt('http://www.youtube.com/embed/TjLCJKoot4U?autoplay=1&amp;rel=0')}
</script>

BODY:


<div style="text-align: center">

<a onclick="big_yt('http://www.youtube.com/embed/TjLCJKoot4U?autoplay=1&amp;rel=0')"><img src="http://img.youtube.com/vi/TjLCJKoot4U/1.jpg" height="70" width="90" title="Cougar Scene" alt="" style="cursor: pointer"></a>

<a onclick="big_yt('http://www.youtube.com/embed/1yUfSZTXh9g?autoplay=1&amp;rel=0')"><img src="http://img.youtube.com/vi/1yUfSZTXh9g/1.jpg" height="70" width="90" title="Ezinge, my village" alt="" style="cursor: pointer"></a>

<a onclick="big_yt('http://www.youtube.com/embed/F1HDmXMl8GM?autoplay=1&amp;rel=0')"><img src="http://img.youtube.com/vi/F1HDmXMl8GM/1.jpg" height="70" width="90" title="We have plenty of water" alt="" style="cursor: pointer"></a>

</div>

<div id="video_container" style="position: absolute; left: 50px; top: 100px; right: 50px; bottom: 80px; background: black"></div>

<div style="position: absolute; left: 50%; top: 50%; margin-left: -60px; color: white; font-family: verdana; font-size: 13px">Select a video on top</div>

You may also be interested in (the source of) this (http://mesdomaines.nu/eendracht/youtube_tablet2/youtube_tablet2.html) test page.