YouTube lightbox link embed breaks on HTTPS pages
-
YouTube videos embedded on HTTPS pages using the lightbox (attached to the links via rel=”lightbox” data-lightbox-type=”iframe”) fail to load because the nivo lightbox js script automatically detects that it is a youtube URL and will replace the iframe src with http://www.youtube.com/embed/VIDEO_ID.
Because this url is forced HTTP, it will be blocked from loading on HTTPS pages by web browsers causing the lightbox to only display a loading icon for infinity.
The code affected by this issue is on lines 196 to 207 of nivo-lighbox.js located in responsive-lightbox-lite/assets/nivo-lightbox/nivo-lightbox.js, it will also need to be reminimized into nivo-lightbox.min.js of course.
To fix this issue, replace lines 196 – 207 with
`
if(video[1] == 'youtube'){
src = '//www.youtube.com/embed/'+ video[4];
classTerm = 'nivo-lightbox-youtube';
}
if(video[1] == 'youtu'){
src = '//www.youtube.com/embed/'+ video[3];
classTerm = 'nivo-lightbox-youtube';
}
if(video[1] == 'vimeo'){
src = '//player.vimeo.com/video/'+ video[3];
classTerm = 'nivo-lightbox-vimeo';
}
`Simply replace the hardcoded “http://” links for youtube and vimeo embeds with protocol relative links “//” to allow the content to be loaded utilizing the same protocol that the current page is using.
Thank you very much for all the hard work you put into this plugin, it’s extremely useful to me.
- The topic ‘YouTube lightbox link embed breaks on HTTPS pages’ is closed to new replies.