Any HTML content overlapping video player on iphone not working - javascript

Will try to explain my question with an example:
Home page has a large flowplayer (video) after the header. And the login tab uses bootstrap models which appears on top of the video player onclick with a normal login form.
Everything works fine on all browsers and devices except iphone or ipad.
By doing some google search I have come to a conclusion that apple does not support any html overlapping the video content.
Could not find any discussions on this topic on this site too, so posting this question here hoping that someone can provide an alternative or a way to get this working (overlapping models on video player).

Try to add
wmode="opaque"
to the
<object>
OR
<embed>
tag parameters and see if it helps.

Related

Is Javascript needed to play HTML 5 Videos in recent browsers?

Based on this page on w3schools I don't see any mention of Javascript being needed to play HTML5 videos on recent browsers.
https://www.w3schools.com/html/html5_video.asp
Yet, when I disable Javascript on Safari, I can no longer play Videos embedded on my webpage via Tag. I even disabled lazy loading on a test page to see if that helped, but it didn't.
My primary concern is visitors on Mobile devices so falling back to flash is not an option.
hence the question, Is Javascript needed on fairly recent browsers ? what are best fallback options without requiring any plugins ?
like, using to provide direct download of Video, etc ?
javascript is absolutely not required to play the video in html5
the w3 video is not playing because it is rendering that part of the dom using js and also video is not local it is brought by anchor tag

Youtube embedded video does not work on chrome

For months I've been noticing embedded youtube videos appear white on any other page, now I found out that I can watch those videos by inspecting the page and putting -nocookie at the hostname of the iframe src, i.e. https://www.youtube-nocookie.com/embed/(VIDEO_ID).
I want to know why this happen and how to fix it, my first thought was to make an userscript to change it in every page.
EDIT: It works fine on Edge and Firefox but not on Chrome, even though my settings for cookies are enabled.
SOLUTION: The problem was that my userscript on Tampermonkey extension (which was supposed to affect the youtube page) was affecting every page with an embedded video, from now on I can figure it out what part of the code was doing that but for now it's turned off.
Thanks to #JasonB for the suggestion about extensions.
This -nocookie url came out almost a decade ago when cookies were still often turned off. This codepen shows that the standard youtube embed code works just fine on a simple site.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/9Ht5RZpzPqw" frameborder="0"
gesture="media" allow="encrypted-media" allowfullscreen=""></iframe>
https://codepen.io/anon/pen/baqdGz
Are there any details about your domain or a link to a broken embedded video on your site that might help us better troubleshoot your issue?
The thumbnail worked just fine, I left it open for 5 minutes and then played the video, and that is all functional. Looks like there's one js error related to the codepen setup - not what you're experiencing.

Jwplayer video not working in chrome

We are sharing jwplayer videos on facebook. The vidoes played fine on all other browser except chrome.
Please share below link on facebook on chrome and play the video, you will see player is disorderd and video is not played.
http://isp-dev.deliveredoncloud.com/facebook-video?v_key=atHlbXDD
The link is verified on facebook and OG debugger, it return response:206.
Any help, why video is not played in chrome.
player condition in chrom when played
From the error in your comments it looks like Chrome is enforcing content security policies.
These are described quite well here: https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives and here: http://content-security-policy.com
Note in particular the browser support table in the first link (this will hopefully be updated regularly so is not a good thing to show here as it would just be a current snapshot).
You can experiment wit different settings, maybe trying a very open policy initially to make sure this is not masking some other issue.

iframe YouTube demo will not work on iPad Safari browser

I refer to the demo code for the YouTube iframe demo located at: https://developers.google.com/youtube/youtube_player_demo. This works perfectly on my desktop and my iPhone, but it will not do so on my iPad in the Safari browser. I obtain a black screen instead. I have modified the code to prevent it auto starting (I have a button now for that). I also write event.target.getPlayerState() to a div on the screen so that I can see what is going on. I wish to use to use the iFrame player and to control it using Javascript.
When it starts up I obtain the still frame from the video (as expected) and the red play button. The getPlayerState() is 5 at this time (video cued). As soon as I hit play the player iframe goes black and the getPlayerState() changes to 3 (buffering). That is it, it will just sit there for hours without change.
I get the same black screen when I try the demo located at: https://developers.google.com/youtube/youtube_player_demo.
I have no difficulty playing a video the YouTube website. Also if I go to any video on the Youtube site and get the iframe embed link then I have no difficulty playing this from a web page. This of course does not have a a Javascript interface.
Has anyone any suggestions? What other info should I provide.
Many thanks.
Peter
This has since fixed itself. But now the demo code will not work on Internet Explorer, the on ready is not firing. There are many posts regarding this on Stackoverflow, but all marked closed. I will investigate further and if necessary open a new post.

Youtube/vimeo iframe won't play in firefox

I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)
I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.
I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.
I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.
Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.

Categories