scaron / prettyphoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
553 stars 281 forks source link

Fix for using prettyPhoto for youtube on https #164

Closed dzek69 closed 1 year ago

dzek69 commented 8 years ago

prettyPhoto uses http-based iframe address, which won't load on secured pages. Using https will make it always work with no side-effects (and actually can speed up iframe loading time).

zweckh commented 7 years ago

Use the video-URL to select http/https with this patch based on the vimeo case

--- jquery.prettyPhoto.js   2015-05-07 02:31:11.000000000 +0200
+++ jquery.prettyPhoto_mod.js   2016-11-03 13:33:27.604852824 +0100
@@ -267,6 +267,10 @@

                        // Regular youtube link
                        movie_id = getParam('v',pp_images[set_position]);
+                       var regExp = /http(s?):\/\/(www\.)?(youtube\.com|youtu\.be)\//i;
+                       var match = pp_images[set_position].match(regExp);
+                       //fallback https as default
+                       if(!match) match=['','s'];

                        // youtu.be link
                        if(movie_id == ""){
@@ -279,7 +283,7 @@
                                movie_id = movie_id.substr(0,movie_id.indexOf('&')); // Strip anything after the &
                        }

-                       movie = 'http://www.youtube.com/embed/'+movie_id;
+                       movie = 'http'+ match[1] +'://www.youtube.com/embed/'+movie_id;
                        (getParam('rel',pp_images[set_position])) ? movie+="?rel="+getParam('rel',pp_images[set_position]) : movie+="?rel=1";

                        if(settings.autoplay) movie += "&autoplay=1";
@@ -293,8 +297,10 @@
                        movie_id = pp_images[set_position];
                        var regExp = /http(s?):\/\/(www\.)?vimeo.com\/(\d+)/;
                        var match = movie_id.match(regExp);
+                       //fallback no match
+                       if(!match) match=['','s','','1'];

-                       movie = 'http://player.vimeo.com/video/'+ match[3] +'?title=0&byline=0&portrait=0';
+                       movie = 'http'+ match[1] +'://player.vimeo.com/video/'+ match[3] +'?title=0&byline=0&portrait=0';
                        if(settings.autoplay) movie += "&autoplay=1;";

                        vimeo_width = pp_dimensions['width'] + '/embed/?moog_width='+ pp_dimensions['width'];
camsloanftc commented 7 years ago

This should also incorporate https in the vimeo URL, which has the same issue.