Home / Tips / Programming languages / Scripting languages / JavaScript / A simple way to open YouTube videos in jQuery Fancybox

A simple way to open YouTube videos in jQuery Fancybox

jQuery
 
jQuery
  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


It can be done in a very simple way. The option type needs be defined as iframe.

Here is an example where we get all the links with the "youtube-video" class and apply Fancybox to them. When clicking these links the lightbox with a video will open and the link to video will be taken from the attribute href of the current link.

Watch out! The link should be taken from an "embed" type of the share section on YouTube.

HTML:

<a href="http://www.youtube.com/embed/Xzk_U9E9jQU?autoplay=1" class="youtube-video">Open video in lightbox</a>

JavaScript:

jQuery( 'a.youtube-video' ).fancybox({
  type: 'iframe'
});

 

Read also

jQuery for beginners: selectors

jQuery for beginners: selectors

jQuery for beginners: AJAX

jQuery for beginners: AJAX

jQuery for JavaScript

jQuery for JavaScript

jQuery UI. Widgets. Dialog (Windows)

jQuery UI. Widgets. Dialog (Windows)

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation