Youtube used to work fullscreen on my site, but a few weeks ago (i think?) it started saying "Youtube cannot go full screen".
I got the code snipped from my site here. And it works in here:
https://www.w3schools.com/code/tryit.asp?filename=GNBNH5E3ZCPS
Any idea why it wont work on my site? Its exacly the same code.
The site i mentioned is www.contribee.com (scroll down a bit for the iframe video)
Also on a side note: it dose go fullscreen on a mobile browser. But it wont work on desktop Chrome (it does work on w3 editor from any browser)
Try changing the fullscreen = true; and call a function
https://support.google.com/youtube/answer/72689?visit_id=637480296059280325-3361042641&rd=1
<iframe id="video" src="Source" frameborder="0" allowfullscreen></iframe>
Related
I'm trying to embed vimeo videos as iframes. I'm using the following code:
<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
It works fine when I paste it in a codepen or try it in firefox. It doesn't work in chrome for me though. When I inspect the iframe's HTML, I can see that vimeo adds a class no-fullscreen-support, it also added these classes though:
js-player-fullscreen
with-fullscreen
Figured it out on my end. It was due to the Permissions-Policy being set by Nginx in the header. In my instance of Nginx, it was originally set to this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
The culprit in this case was fullscreen=(self) -- it was telling Chrome that unless the code originated from the site, it shouldn't allow full screen. As Vimeo's iframe is being loaded from player.vimeo.com, Chrome saw that as a third party and wouldn't allow it. Removing that from the Permissions-Policy so it looked like this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";
Resolved the problem. The button is showing fine now.
For those using Apache, it'd probably look like this:
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
The same principle applies, just remove fullscreen=(self).
You might also see it mentioned as Feature Policy, same thing, it's just called Permissions Policy now.
You can learn more about Permissions Policy here: https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md
From Vimeo Help Center:
The fullscreen button will be hidden from the player in scenarios where fullscreen mode cannot be activated. Here are some common causes:
First and foremost, check the Embed tab. Make sure the fullscreen button is toggled on under the Controls section
The iframe embed code is missing the fullscreen attributes: "mozallowfullscreen,""webkitallowfullscreen," and "allowfullscreen." If you’re pasting your embed code into another application, make sure these values are being retained.
The player iframe is contained within another iframe that is missing the fullscreen attributes. Browsers do not allow iframes to enter fullscreen if they are contained within other iframes without these fullscreen attributes. - Try inserting the player outside of the container iframe or adding "mozallowfullscreen," "webkitallowfullscreen," and "allowfullscreen" to the container iframe.
The iframe is contained within a frame. Frame elements cannot enter fullscreen, and neither can any iframes inside of them. We recommend removing all frame tags from your page’s source code.
If you're not sure if the above cases apply, please contact us, and we’ll investigate further. Be sure to include a link to the page where the video is embedded, so we can take a closer look at your page's source code.
You should add these tags to the element:
webkitallowfullscreen mozallowfullscreen allowfullscreen
what if you just download the video and upload it somewhere like github?
And then use the tag to embed the video?
<video src="protocol://someurl.domain/path" muted autoplay width="1140" height="570"></video>
If vimeo doesn't allow downloading you can always use third-party tools like savethevideo.com
i have a wordpress website and i am using iframe to embed youtube video. Issue is when i click on fullscreen icon of video, my page with whole content go in fullscreen mode.
Its a weird issue and i have worked hours to solve this issue. Please check this link.
website link
using my code as:-
<iframe width="640" height="360" src="https://www.youtube.com/embed/Di7G4nbpyDg?feature=oembed" frameborder="0" allowfullscreen></iframe>
i know direct website links is not acceptable but this is something need to fix. Any response will be appreciated.
Thanks
On Wordpress use [youtube https://www.youtube.com/watch?v=XX11XX11X]
xx11xx11x is only example.
Wordpress wants to keep sites prtoected from iframes. So you are not able to publish <iframe>s.
Did you got it?
Edit: In your case use: [youtube https://www.youtube.com/watch?v=Di7G4nbpyDg]
like this:
I have no permission to show you the full video link.
Here is my embed code:
<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
And here's how it's showing.
The video upload is 1080p and the poster image was chosen from the video (though I had the same issue with one that was a custom image) so I'm not sure what's missing.
Yes, this appears to be across all YouTube embeds. If it really bugs you, like it does me, I'd suggest showing the thumbnail and then swapping it out on click to the video with autoplay on. I wrote about doing this using jQuery years ago here: start/play embedded (iframe) youtube-video on click of an image
Your thumbnail is avaialble at: http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg
I was tidying up an AngularJS YouTube directive when they made this switch and I spent half an hour trying to figure out what I'd done to create that black border around the thumbnail until I looked around the internet at other embedded videos and noticed that it was YouTube system wide. Heh.
No idea why YouTube decided to do this, it looks horrible.
Try setting the iframe size using css, initially inline like this:
<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
If this works, neaten it up by giving the iframe an id and then add the dimensions as a rule to the external css file.
we were embedding facebook videos in our website using iframe, it was working fine before, but from last few days site is not able to load video. we have tried it with simple web page as well but no luck. below is the code we are using
<iframe src="https://www.facebook.com/video/embed?video_id=video_id" width="650" height="400" frameborder="0" allowfullscreen></iframe>
please let me know if anyone can do a quick help
Just Use this link. It worked for me. "http://www.facebook.com/video/embed?video_id=XXXXXXXXXXXXX";
where XXXXXXXX is your facebook video id.
eg:
Facebook Sample Video:
<iframe src="http://www.facebook.com/video/embed?video_id=10152463995718183" frameborder="0" width="100%" height="100%">
You need to use this link now :)
https://m.facebook.com/video/video.php?v=xxxxxxxx
OLD ANSWER
the problem isnt that the video is not embeded but that it is not in an iframe correctly stretched. Cca a week before facebook has changed the embed link and video is not stretch to screen width and it cant be done in this fashion. I havent find a solution how to fix it yet.
Maybe there is a possibility to gut out mobile version of the video which is even in HTML5 ... problem with that approach is that the video is available only for a limited amount of time (cca 2 hours) .. then the link will expire and you need to click on a facebook video again which will create a different video.
Example here - https://m.facebook.com/story.php?story_fbid=751234308276798&id=643601645706732&_rdr
Try to use this URL: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey
It's better then the embed url. The video fits in viewport.
did you try to embed different video? the video you're trying to embed may have been remove or hide so it can't show on your site. try embeding a sample video. if it appear the problem is on your video.
YouTube iOS8 Media Load Issue - Media plays successfully while in Safari, but when the app is loaded from a Home Screen web clip, playing the video fails.
Moreover, tapping a link to navigate away from the page while the media is failing to load results in a complete crash of the app to the Home Screen.
Here is a link that demonstrates this (obviously run on your iDevice). You can run it initially in Safari browser, it'll work fine. Install it as a home screen icon, playing video will fail, and clicking the bottom link will crash the app.
http://nterspace.com/youtubeissue.html
The code that works when the app is loaded up in the Safari browser is:
<iframe width="100%" maxwidth="432" height="270" src="//www.youtube.com/embed/_j4KrMAygJI" frameborder="0" allowfullscreen></iframe>
Anyone have any thoughts? Is this bad embed code?
Today, April 09, 2015. Finally , this issue is partially resolved. After updating to version 8.3 my webapps returned to work again for the dailymotion and vimeo videos. Youtube videos are now redirecting to the native application, which is very annoying.
EDIT:
As the youtube videos was redirecting to the native application , I had to use the youtube url as follows:
<iframe width="100%" height="300" src="https://www.youtube-nocookie.com/embed/hdjL8WXjlGI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
So my users can watch the video without having to leave the webapp.
For some reason the nocookie option does not redirect. Let's hope that this will be completely fixed in the next iOS version.
I am having the same issues!
This is an issue particular to IOS8. Please see: https://discussions.apple.com/thread/6558443 Hopefully Apple will fix this issue soon. Another issue arising is unable to use Play button:
The Play button on a youtube embed does not work on android-chrome
UPDATE: They have fixed the PLAY button ISSUE!
It was still broken on 8.3 for me, but it turned out it was because there was an <input type="search"> element on the page (bizarre). Made a video: https://www.youtube.com/watch?v=rrKxAIXnydE
iOS 8.3 fixes the bug. Videos are now playable from homescreen webapp, including from appcache.
source:
Just tested this on iPad with IOS 8.1.3 - still broken.
sneuf's iframe works for safari pages but not when loaded from home screen (web clip).