I am trying a create a popup window which will play the youtube video. But I don't know, for some reason it is not happening. I have included the code below of what I have tried. I am trying to use it in wordpress.
<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 2</a>
<div class="modal" id="video-modal">
<div id="video-container" style="width: 425px; height: 344px;"></div>
<script language="javascript" type="text/javascript">
$(function() {
var videoModal = $('#video-modal').overlay({
expose: {
color: 'black',
loadSpeed: 200,
opacity: 0.85
},
closeOnClick: true,
api: true
});
$('.video-link').click(function() {
videoModal.load();
var videoUrl = $(this).attr('href');
var flashvars = {};
var params = {
allowFullScreen: "true",
allowscriptaccess: "always"
};
var attributes = {};
swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);
return false;
});
});
Can someone correct me where I am going wrong. On clicking the link it is taking to the youtube video.
Try adding preventDefault() to your click
$('.video-link').click(function(e) {
e.preventDefault();
...
});
To add video in popup you can also use
http://www.youtube.com/embed/(ID of video)?parameters
in your case
<a href="http://www.youtube.com/embed/2cxqZiWyW3g?autoplay=1"
class="video-link">Video 1</a>
I have created codepen for it , please check it http://codepen.io/unmeshdusane/pen/WQKvPQ
you can use This
your Links
<a href="#play" onclick="popupYT('2cxqZiWyW3g')">Video 1</a>
<a href="#play" onclick="popupYT('607RMNoJfl4')">Video 2</a>
and the Script
<script>
function popupYT(id) {
window.open('https://www.youtube.com/embed/'+id, 'popup', config='height=375,width=450')
}
</script>
Very Simple and works