Adding you tube player (iFrame) in jQuery modal dialog

Question

I have some images in my HTML and _I need to play embedded you tube video videos on click of each image which should load/play in a jQuery UI dialog. Basically like a pop up video player.

So here is what i have done to play/attach video with each image. I have three images and i have added the unique video id in my custom data-attribute which i taken from you tube.

HTML

<div id="ImageBox">
 <img src="img1.png" class="playVideo" alt="" id="image1" data-videoId="v6jg8g"/>
 <img src="img2.png" class="playVideo" alt="" id="image2" data-videoId="re84hj"/>
 <img src="img3.png" class="playVideo" alt="" id="image3" data-videoId="dhj3fk"/>
</div>

<!-- HTML for jQuery modal dialog -->
<div id="MyVideoPlayer">
    <div>
        <strong id="videoTitle">title for video</strong>
        <img src="closeButton.png" id="Close" alt="Close" />
    </div>
    <iframe src="https://www.youtube.com/embed/MyVideoId?wmode=opaque&autoplay=1&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1" id="Player" width="100%" height="100%"></iframe>
</div>

Note: I am using iframe embed method from you tube player API to embed videos.

For JavaScript/jQuery section, I came up with two choices here.

1. Because i am working in a ASP.NET MVC 3 app, i can set the unique video id to @ViewBag in script and assign to iFrame like this...

$('#ImagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');
    '@ViewBag.VideoId' = myId;
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });       
});

2. Assign the updated iFrame src with new video id each time dialog opens.

$('#imagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');

    var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
        &showinfo=0&controls=2&rel=0&enablejsapi=1';

    $('#MyVideoPlayeriframe').attr('src', src);     
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });        
});

Which one should I go with. I found some references though,

• Embedded jwplayer into jQuery Dialog
• https://stackoverflow.com/questions/15887106/how-to-get-embedded-video-into-modal-dialog
• jQuery mb.YTPlayer

Is there any way i can make it little more simplified and re-usable in future. Please advise with your wise opinion.

Answer 1

I am little late updating this thread but I managed to create a method or more of a plugin by extending jQuery's prototype object. This is a nice link to start learning.

// following is the method by extending the jQuery's prototype object
// to convert and embed an element into a video pop-up
(function ($) {

    $.fn.videoPlayer = function (options) {

        var defaults = $.extend({
            title: "",
            videoId: "",
            autoplay: 1
        }, options);

        var videoBox = this.find('#VideoBox');
        var videoElement = document.createElement('iframe');
        var src = 'https://www.youtube.com/embed/' + defaults.videoId + '?wmode=opaque&autoplay=' + defaults.autoplay + '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';

        this.find('#VideoTitle').text(defaults.title);
        $(videoElement).attr({
            'src': src,
            'frameborder': 0,
            'width': '100%',
            'height': '90%'
        });

        videoBox.html(videoElement);

        this.dialog(
            { width: 'auto' },
            { height: 'auto' },
            { draggable: false },
            { resizable: false },
            { closeOnEscape: false },
            { modal: true },
            { show: { effect: "fade", duration: 200} },
            { hide: { effect: "fade", duration: 250} },
            { close: function (event, ui) {
                $(videoElement).remove();
                $(this).dialog('destroy');
              }
            });

        //making the method chainable!
        return this;
    };

})(jQuery);


$(function(){

  $('#VideoPlayerPopUp #Close').click(function () {
    $("#VideoCatcher").dialog("close");
  });

  $('#Entertainment .launch-video').click(function () {
    var element = $(this);

    $('#VideoCatcher').videoPlayer({
       title: element.attr('data-videoTitle'),
       videoId: element.attr('data-videoId')
    });
  });
});

I have used custom HTML data-attributes for video title and video id. This will keep HTML clean and semantic. You can of course style/customize the pop-up accordingly.

Visit this working demo to see this in action.