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?
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';
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 ) :
Your Youtube Video
You could also use an image for the cover or a thumbnail as well :
<img src="https://assets.entrepreneur.com/content/3x2/2000/20180117155526-youtube.jpeg" width="700" height="400" alt="View Youtube Video"/>
I hope this will help anyone who is still using PrettyPhoto.
Related
as I already found great help here in the community, I thought I'd post my question here, maybe there'd be somebody who could help me.
I am creating my websites in wordpress and found a great tool for creating an image carousel. As I am more of an intermediate in wordpress and mainly working with plugins, I found the swiper JS plugin in the wordpress plugin directory. It works fine but I have the problem that it won't loop and you can't get to the first and last image of the carousel, it always snaps back to the second and second to last image.
https://wordpress.org/plugins/swiper-js-slider/
This is the one I am using right now.
My question also is how I can use the Swiper JS in wordpress without using the plugin. I want to have it specifically on one page and it should be mobile friendly. All the design that already is on the page should be remain as it is. Would there be a possibility to include the Swiper Js tool even though I am using a wordpress theme?
Thank you so so much, it is really hugely appreciated!
Linda
Only worked with the plugin so far, no css helped...
Using WP custom code.
We assume your words "the plugin" are about that exact SwiperJS plugin.
Have you considered using an iFrame? See lower web links.
An iframe will allow you to add a video, audio, images, etc., so presumably even a slider lands in that category. Try this avenue first to see if it works for your needs. Read about WP iframe use in the links below.
<iframe src="test7.html" width="600" height="300" style="border:1px solid black;" title=""></iframe>
Or...
Other snippet plugin options exist (read developer docs). There are pro/con to some of those options (i.e. time, etc). Read developer resources (from an WP admin perspective) for more ideas.
wordpress iframe
kinsta article
WP developers articles
My Youtube embed appears in Chrome and Firefox, but it doesn't appear in Safari (which includes mobile Safari on the iPhone). I get the same result using Vimeo or native HTML5 video - nothing appears in this div. Here's a 1-minute video that shows exactly what's happening:
https://www.youtube.com/watch?v=YnqDlmYOKW8
I tried z-index, position, changing the width and height of the iFrame, changing https to http, removing encrypted-media in the embed code, and so much more.
The website is https://waltrib.com/shop/ and the test product is "Heavy Dirt". I'm using a plugin called Booster Wordpress that allows me to change product images into custom HTML (so I'm using it for Youtube embeds).
At 0:48 in the video above - what's bizarre is that when I open the Developer Inspector and add anything like www then the iFrame appears. Weird. When browsing in Safari, it renders Youtube embeds on every single page of the website, except for the /shop page.
I read this stackoverflow which suggests using object but that didn't work.
Has anything seen a bug like this? It's one of the strangest things I've seen recently.
Instead of :
src="https://youtube.com/embed/5i9SzaumaRg"
Use:
src="https://www.youtube.com/embed/5i9SzaumaRg" // Note the "www"
Sounds silly, but works.
Update:
It seems a change in URL of any kind refreshes the iframe and hence it appears so following would work:
let i = document.getElementsByTagName("iframe")[0];
i.setAttribute("src",i.getAttribute("src")+"?r=4535");
Execute this code only after iframe is loaded. Use load handler for that.
Try adding parameters to iFrame src link:
<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
More on my answer here.
Ive got a very basic WordPress website using the new 2017 theme and I'm trying to embed a simple video. The video is on OneDrive, but it should be the same as YouTube or any other source, and I can play the video fine in a plain HTML page.
When I insert the following HTML iframe in my post:
<iframe src="https://onedrive.live.com/embed?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw" width="320" height="180" frameborder="0" scrolling="no" allowfullscreen></iframe>
It shows a small blank frame for a few seconds when I preview the post, then it jumps to the onedrive embedded link showing the video full screen, so you cant see the post.
I tried using a plugin too and that didn't work either, somehow it had the same problem. I was using FV player which seems to be very popular but when I try to embed this video it says there "Video Issues". I know there's nothing wrong with the video because, again, I can insert this iframe in a plain HTML page and it works no problem. Only when I embed the iframe in a wordpress post does it pop out into the onedrive link and go full screen.
Any suggestions? This should just work and I don't know what I'm missing.
src="https://onedrive.live.com/embed?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw"
replace the embed with download. and use normal video tag instead of iframe.
src="https://onedrive.live.com/download?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw"
I've decided to provide a tag to setup videos in my plugin description.
In doing this, I've found WordPress does not respect the target="_blank" option.
Does anyone know a method of doing this?
Although it should be obvious, here is my code:
this video playlist
It's so strange that in your WP not work target="_blank.
In the editor there is the command and give target="_blank.
So you can force it with:
<a onclick="openInNewTab('https://www.youtube.com/watch?v= video code ');">this video playlist</a>
This for me work every time.
On our website which is built in Kentico we have embedded a youtube video, as follows:
<div class="youtube">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/<%# Eval("YouTubeId") %>?autoplay=0&autohide=1&controls=1&loop=0&playlist&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=1&iv_load_policy=1&start=0&theme=dark&color=red&enablejsapi=1&" frameborder="0" allowfullscreen></iframe>
</div>
The above iframe has a thumbnail associated with it, which looks like this
<div class="poster"><span></span><%# IfImage("Thumbnail",GetBrickImage(Eval("Thumbnail"), "featurevideo", Eval("Title")), "") %></div>
and sits just under the closing div of class youtube.
Now my issue is when the users come to the site and presses play on the thumbnail the video doesn't play straight away instead the thumbnail disappears and the default youtube play button appears making the user press play again, when I use the developer tool bar and press play for the first time I get the error
Blocked loading mixed active content "http://www.youtube.com/iframe_api"
I cannot for the life of my figure out what is going wrong, We have recently installed a SSL certificate on the server this site currently sits on and since then its been causing this issue. From what I have read and see people were suggesting to drop the www. so it would be https://youtube.com.... again this didn't help me. I then went and tested this on IE10/Chrome and the issue is still happening. Can anyone suggest anything for this?
It is a limitation of the CKEditor. It has been resolved in version 8.2.1.
http://devnet.kentico.com/questions/kentico-v8-ckeditor-youtube-embeds-https