WordPress Popup Iframe Youtube Https with PrettyPhoto

Question

A few days ago, I converted my website to https. I had many problems but they are solved. But the last problem I have is, youtube videos don't work anymore as a popup with prettyphoto, I get nothing but a black or white screen. When i inspect the pop-up the iframe from youtube load over HTTP, instead of https.

<a href="https://www.youtube.com/watch?v=#" dat-rel="prettyPhoto[product-gallery]" title="My YouTube Video">
    <img src="https://img.youtube.com/vi/#/default.jpg" alt="YouTube" width="50">
</a>

Is anyone familiar with this problem? Or does anyone have a function for my WordPress website so every iframe I have load over https instead of HTTP?

Headrest

Answer 1

prettyPhoto defaults to only using http for its iframe video links. The issue is that if your site is secure, then it won't load the insecure content.

The problem is also described, with a couple solutions and one attempt to merge, on its github page: https://github.com/scaron/prettyphoto/issues/156

Given version 3.1.6 unminified, a quick fix is to edit the prettyPhoto.js file and simply add an s after the http, as there's nothing wrong with loading secure content from any context. Edit it around line 282 and 297 (one is for youtube, one is for vimeo).

Line 282, edited:

movie = 'https://www.youtube.com/embed/'+movie_id;

Line 297, edited:

movie = 'https://player.vimeo.com/video/'+ match[3] +'?title=0&byline=0&portrait=0';

Trembly

For jquery.prettyPhoto.js (minified), just find and replace http://www.youtube.com/embed by https://www.youtube.com/embed in jquery.prettyPhoto.js – Pham

Answer 2

Alternative Solution For PrettyPhoto + Youtube/Vimeo Videos

It is pretty clear that this post is several years old - however, I will post this alternative solution regarding the issue with PrettyPhoto not displaying video content ( such as Youtube + Vimeo ), in the hope that others who are experiencing this issue can use this solution.

After having scoured the web and every forum in search for a solution on how to make Youtube + Vimeo videos display within the PrettyPhoto modal - and after having revised the javascript innumerable times with no results, I tried a solution which already exists within PrettyPhoto: Using the iFrame.

Once your Youtube or Vimeo videos are used within the manner depicted below, they will open ( you could resize the iFrame to your specifications, since it is set to display at 100% width ) :

<a href="https://www.youtube.com/embed/AAsMVW8njzw?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframe]" title="Click To View Video">Your Youtube Video</a>

You could also use an image for the cover or a thumbnail as well :

<a href="https://www.youtube.com/embed/AAsMVW8njzw?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframe]" title="Click To View Your Youtube Video"><img src="https://assets.entrepreneur.com/content/3x2/2000/20180117155526-youtube.jpeg" width="700" height="400" alt="View Youtube Video"/></a>

I hope this will help anyone who is still using PrettyPhoto.

Etude