How to embed a You Tube video into a pop up

Follow @tristarweb

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:

View Demo »

Creating the function

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

<script type="text/javascript">
function showPopup(url) {,'name','height=445,width=697,top=200,left=300,resizable');

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="" 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 “””. 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.

About robert

Hi my name is Rob Hills. At most times you will find me playing around with Magento and Wordpress. I am always looking to improve my web development knowledge – this ranges from PHP, Javascript, jQuery, XML etc. Other than web development – I produce Dance Music. My biggest achievement is getting my track played by Kutski on Radio 1..

3 Responses to How to embed a You Tube video into a pop up

  1. web design usa says:

    06:19 17/09/2011

    Can you please also guide me how to share a youtube video into a wordpress in a synchronized manner?

  2. web design usa says:

    06:20 17/09/2011

    can you also guide me how to publish a youtube video on wordpress theme?


  3. Tristar Author

    Cheers for your comment. Copy the function into an external Javascript file. Make sure that you only copy the function leaving out the script and CDATA tags. Save it as video-popup.js in your themes js folder (create a js folder if there isn’t one).

    Open up your themes header.php and paste in the following:

    <script type="text/javascript" src="/wp-content/themes/myTheme/js/video-popup.js"></script>

    You should be able to use the link code from the tutorial in the wordpress CMS. Alternatively, you can hard code the link a template page such as page.php. Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter