How to embed a You Tube video into a pop up

Today I am going to show you how to embed a Youtube video into a new pop up window using Javascript. In fact, it doesn’t have to be Youtube, it can be pretty much any video player – as long as you have the full url.

For example:

http://www.mydomain.com/videofeeds/myvideo.php

View Demo »

Creating the function

Copy and paste the below javascript into your website design code:

<script type="text/javascript">
//<![CDATA[
function showPopup(url) {
newwindow=window.open(url,'name','height=445,width=697,top=200,left=300,resizable');
newwindow.focus();
}
//]]>
</script>

What I have done here is created a custom function called showPopup(). This will accept a variable called ‘url’. Inside the function I defined a new variable called ‘newwindow’. This is equal to the open() method which will open a new browser window. Finally I used the focus method which will ensure that the new window is sent to the front.

Creating the Link

<a href="http://www.youtube.com/embed/0Z9rP7CBs_Y" onclick="showPopup(this.href);return(false);">Web design London</a>

Above is an example of a link that calls the showPopup function. To do this I used the onclick attribute. Because the showPopup function accepts one value, I passed in “this.href” which is equal to the link “http://www.youtube.com/embed/0Z9rP7CBs_Y””. Finally I disabled the default link action by adding return(false).

To get a youtube link, simply click embed underneath your chosen video and copy the url specified. Alternatively you may wish to use your own video player link. Either should would work fine. I hope you found this web design tutorial useful.