Bootstrap Modal prozor ne prepoznaje sve varijante YouTube URL-a

Bootstrap Modal prozor ne prepoznaje sve varijante YouTube URL-a

offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Na internetu sam pronašao jQuery koda koji radi veoma dobro i služi da se otvori YouTube video u modalnom prozoru . Ja sam promenuo neke detaljei sve je bilo u redu dok nisam shvatio da ne prepoznaju sve varijante YouTube URL adresa .

Sve što je potrebno je da se izvuče YouTube ID i stavi ga na pravo mesto . Napisao sam regex i kombinovao nekoliko verzija , ali ne radi sa svakim URL-om.

Ovo je moj kod:
$('a[href^="https://www.youtu"]').on('click', function(e){         var YouTube=$(this).attr('href').replace(/feature=player_embedded[&\w]*(?!['"][^<>]*>|<\/a>)/ig, "").replace(";", "");  // replace player_embedded             preg=/(?:http|https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w\-]{10,12})\b[?=&\w]*(?!['"][^<>]*>|<\/a>)/ig,             youtubeID=YouTube.replace(preg, '$1');         if (youtubeID!="" && (YouTube.indexOf('v') > -1 || YouTube.indexOf('embed') > -1))         {             // Prevent opening of external page             e.preventDefault();             // Variables for iFrame code. Width and height from data attributes, else use default.             var width = $(window).width(),                 vidWidth = 800, // default                 vidHeight = 450; // default             if ( $(this).attr('data-width') ) { vidWidth = parseInt($(this).attr('data-width')); }             if ( $(this).attr('data-height') ) { vidHeight = parseInt($(this).attr('data-height')); }             // responsive debug             var vidWidth =  (width>vidWidth?800:(width-60));             var iFrameCode = '<div class="video-container"><iframe width="' + vidWidth + '" height="'+ vidHeight +'" scrolling="no" allowtransparency="true" allowfullscreen="true" src="https://www.youtube.com/embed/'+ youtubeID +'?controls=0&autohide=1&autoplay=1&iv_load_policy=3&theme=light&rel=0&showinfo=0" frameborder="0"></iframe></div>';             // 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'),                     modalDialog = $(this).find('.modal-dialog'),                     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();         }     });
Hvala!



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 16 Jan 2010
  • Poruke: 241
  • Gde živiš: Zemun

http://linuxpanda.wordpress.com/2013/07/24/ultimat.....-link-url/



offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Hvala mnogo. Izmenjao sam ovaj javaskript i uradio na sledeći način:

function YouTubeID(url) {      var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;      return (url.match(p)) ? RegExp.$1 : false;    }    $('a').on('click', function(e){       var YouTube=$(this).attr('href');  // replace player_embedded       var queryString = YouTube.slice( $(this).attr('href').indexOf('?') + 1),          queryVars = $.parseQuery( queryString );              if ( 'v' in queryVars ){          youtubeID=queryVars['v'];       }       else{          youtubeID=YouTubeID(YouTube);       }       if (youtubeID!="" && (YouTube.indexOf('v') > -1 || YouTube.indexOf('embed') > -1))       {          // Prevent opening of external page          e.preventDefault();                    // Variables for iFrame code. Width and height from data attributes, else use default.          var width = $(window).width();          var vidWidth = 800; // default          var vidHeight = 450; // default          if ( $(this).attr('data-width') ) { vidWidth = parseInt($(this).attr('data-width')); }          if ( $(this).attr('data-height') ) { vidHeight = parseInt($(this).attr('data-height')); }          // responsive debug          var vidWidth =   (width>vidWidth?800:(width-60));          var iFrameCode = '<div class="video-container"><iframe width="' + vidWidth + '" height="'+ vidHeight +'" scrolling="no" allowtransparency="true" allowfullscreen="true" src="http://www.youtube.com/embed/'+ youtubeID +'?controls=1&autohide=1&autoplay=1&iv_load_policy=3&theme=light&rel=0&showinfo=0" frameborder="0"></iframe></div>';                    // 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('');    });

Radi perfektno. Hvala!

Ko je trenutno na forumu
 

Ukupno su 902 korisnika na forumu :: 46 registrovanih, 6 sakrivenih i 850 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 357magnum, babaroga, Bane san, Battlehammer, bojcistv, ccoogg123, Centauro, Dorcolac, DrugiREI, FileFinder, FOX, Georgius, hologram, janbo, Još malo pa deda, kovinacc, Kubovac, kybonacci, mercedesamg, MikeHammer, milenko crazy north, milutin134, Mixelotti, moldway, Nobunaga, opt1, powSrb, procesor, raketaš, robert1979, royst33, sasakrajina, Sirius, slonic_tonic, Smajser, srbijaiznadsvega, Srle993, stegonosa, tmanda323, Toper, vathra, voja64, VP6919, vukovi, x9, zuxbg