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
Related
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"
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.
I am having a website.
I want it to be displayed as an Iframe on my partner site.
<iframe src="http://www.mywebsite.com"></iframe>
However, when he try to see it, nothing is showing up, blank page, but if he change the same iframe source to youtube for example, he got the videos.
Very strange, any idea where the problem is coming from ?
Cheers
I've made no code changes, but in the last few hours, all my embedded youtube videos (using the new iframe html5 method) started autoplaying.
From searching around online, I found some that recommended putting ?autoplay=0 in the src URL, but that doesn't work.
Another suggestion said I'd have to go back to the old method, and that that's the only one that allows us to turn off autoplay.
I'd really rather not do that, but certainly will if I need to, but the bigger question is,
Q1: Is there another way to stop it from autoplaying other than reverting to the old embed?
Side question: What changed in the past few hours that made all my videos start autoplaying?
<iframe src="//www.youtube.com/embed/N2tlvo5CI4Y?autoplay=0"
frameborder="0" allowfullscreen></iframe>
I hear it's the GoogleCast extension.
Disable it
Close Chrome
Run Chrome
Should be fixed for now.
Well, try this on fiddle :
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url= http://www.youtube.com/watch?v=vabnZ9-ex7o" style="width:100px; height:32px;"></iframe>
when you OPEN the page you will see "0" on twitter. But, if you "run it" (on fiddle) it will show "24". Why? And How can I fix it?
To me is seems like a connection issue. As you click the fiddle the first time, you get the same behavior as you experience on Twitter. However, when you click run to update, it works the way it should.
... and what exactly do you mean by OPEN?
edit:
The IFrame uses the referral url. If you take a look at JSFiddle, the counter links to how many have shared the page where the IFrame is present. Instead of the YouTube url you provide using the src attribute.
This makes sense when you think of the actual use of the Tweet-button.
But it is still a bit odd, that the count it shows on JSFiddle refers to the YouTube link you provided and not JSFiddle.
However, if you do remove the YouTube link you can in fact see the counter change to how many who's shared JSFiddle's display page.
This confirms, that providing a external source to the IFrame is not a decent way of making this work.
If this is necessary, the button must be created using the anchor element instead of using IFrame.
See this https://dev.twitter.com/docs/tweet-button