Skip to content

Instantly share code, notes, and snippets.

@jawinn

jawinn/boostrap-youtube-modal.js

Last active July 20, 2017 03:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jawinn/6655039 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jawinn/6655039 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jawinn renamed this gist Sep 22, 2013. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.js → boostrap-youtube-modal.js
    View file
    File renamed without changes.
  2. jawinn revised this gist Sep 21, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    // REQUIRED: Include "jQuery Query Parser" plugin here or before this point: https://github.com/mattsnider/jquery-plugin-query-parser
    // REQUIRED: Include "jQuery Query Parser" plugin here or before this point:
    // https://github.com/mattsnider/jquery-plugin-query-parser

    $(document).ready(function(){

  3. jawinn revised this gist Sep 21, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // REQUIRED: Include "jQuery Query Parser" plugin here or before this point: https://github.com/mattsnider/jquery-plugin-query-parser

    $(document).ready(function(){

    // BOOTSTRAP 3.0 - Open YouTube Video Dynamicaly in Modal Window
  4. jawinn revised this gist Sep 21, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -46,4 +46,4 @@ $('#mediaModal').on('hidden.bs.modal', function () {
    $('#mediaModal .modal-body').html('');
    });

    }); // end document ready
    });
  5. jawinn revised this gist Sep 21, 2013. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    $(document).ready(function(){

    // BOOTSTRAP 3.0 - Open YouTube Video Dynamicaly in Modal Window
    // Modal Window for dynamically opening videos
    $('a[href^="http://www.youtube.com"]').on('click', function(e){
    @@ -42,4 +44,6 @@ $('a[href^="http://www.youtube.com"]').on('click', function(e){
    // There was mention of videos that kept playing in the background.
    $('#mediaModal').on('hidden.bs.modal', function () {
    $('#mediaModal .modal-body').html('');
    })
    });

    }); // end document ready
  6. jawinn created this gist Sep 21, 2013.
    45 changes: 45 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    // BOOTSTRAP 3.0 - Open YouTube Video Dynamicaly in Modal Window
    // Modal Window for dynamically opening videos
    $('a[href^="http://www.youtube.com"]').on('click', function(e){
    // Store the query string variables and values
    // Uses "jQuery Query Parser" plugin, to allow for various URL formats (could have extra parameters)
    var queryString = $(this).attr('href').slice( $(this).attr('href').indexOf('?') + 1);
    var queryVars = $.parseQuery( queryString );

    // if GET variable "v" exists. This is the Youtube Video ID
    if ( 'v' in queryVars )
    {
    // Prevent opening of external page
    e.preventDefault();

    // Variables for iFrame code. Width and height from data attributes, else use default.
    var vidWidth = 560; // default
    var vidHeight = 315; // default
    if ( $(this).attr('data-width') ) { vidWidth = parseInt($(this).attr('data-width')); }
    if ( $(this).attr('data-height') ) { vidHeight = parseInt($(this).attr('data-height')); }
    var iFrameCode = '<iframe width="' + vidWidth + '" height="'+ vidHeight +'" scrolling="no" allowtransparency="true" allowfullscreen="true" src="http://www.youtube.com/embed/'+ queryVars['v'] +'?rel=0&wmode=transparent&showinfo=0" frameborder="0"></iframe>';

    // Replace Modal HTML with iFrame Embed
    $('#mediaModal .modal-body').html(iFrameCode);
    // Set new width of modal window, based on dynamic video content
    $('#mediaModal').on('show.bs.modal', function () {
    // Add video width to left and right padding, to get new width of modal window
    var modalBody = $(this).find('.modal-body');
    var modalDialog = $(this).find('.modal-dialog');
    var newModalWidth = vidWidth + parseInt(modalBody.css("padding-left")) + parseInt(modalBody.css("padding-right"));
    newModalWidth += parseInt(modalDialog.css("padding-left")) + parseInt(modalDialog.css("padding-right"));
    newModalWidth += 'px';
    // Set width of modal (Bootstrap 3.0)
    $(this).find('.modal-dialog').css('width', newModalWidth);
    });

    // Open Modal
    $('#mediaModal').modal();
    }
    });

    // Clear modal contents on close.
    // There was mention of videos that kept playing in the background.
    $('#mediaModal').on('hidden.bs.modal', function () {
    $('#mediaModal .modal-body').html('');
    })