When i Click on the full screen option in Safari, the video gets enlarged in half of the screen than full.
I have used basic iframe from youtube video. I used it in a custom website. What can be the issue here ? Kindly Please help me out.
This explains it https://tubularinsights.com/youtube-adds-iframe-embed-code-no-iphone/
and Making youtube.com/embed URLs work on iOS
also its is a duplicate to these two :
youtube embed video not working with safari
YouTube embed iframe not showing in Safari
Related
I have a simple webpage with a <video> tag. I tried assigning the src attribute of the video tag with URLs of two different videos, both about 2 and a half seconds long:
The first video has a frame resolution of 3840x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/2/
The second video has a frame resolution of 4096x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/3/
I'm encountering a problem with the second video when loading the webpage from Google Chrome on my mobile device (Galaxy S10). The first JSFiddle works perfectly fine on all devices. The second JSFiddle seems to work fine on desktop browsers, but simply displays a blank white screen when I open it on my mobile device (on Google Chrome for example).
I've tested this functionality using many other video files, and it is clear that the frame resolution is the decisive factor here: the problem occurred with every single video with a resolution of 4096x2160, and only with these videos.
I tried using this website: https://clideo.com/crop-video, to test whether or not it is even possible to display high resolution videos on mobile. I uploaded the second video (the one that was causing a white screen), and it was successfully displayed using a video tag on that website - both on desktop and on mobile!
What am I doing wrong? Any help to resolve this would be appreciated.
Once again just to clarify:
The issue does not happen on desktop browsers at all.
The issue does not happen on FireFox on my Galaxy S10.
The issue happens on every other browser I tried on my Galaxy S10, as well as in Safari on iPhone.
On an iphone, videos that I'm loading through a element appear with the immovable iOS play button overlay.
When viewing the site in the Chrome browser, I'm able to see the first frame of each video behind the play button. In Safari for iOS, I only see the play button and the blank video player behind it.
I would like users to see the video preview in both browsers the way they can when using Chrome. How can I achieve this in iOS Safari?
When pressing the fullscreen button on any embedded youtube video Chrome & IE (strangely Opera webkit works fine) acts as though I have pressed F11.
http://www.babymetalfan.com/discography/babymetal-2014/01-babymetal-death/
I have tried adjusting z-index values but no luck so far.
Edit: I fixed the video here by forcing the embed to use the flash player: http://www.babymetalfan.com/2014/07/08/babymetal-the-forum-london-7-7-14-ii-ne-proshot-video/ The issue still exists on all my html5 embeds.
HTML5 full-screen overlay is behind content text.
It appears that any content after the video is displayed, renders above the video on full-screen.
The blackberry developer tools were no help when trying to find the issue, or change z-indexes on various elements.
Is there a hook for html5 in blackberry that I can get to display above the content?
Is this a Blackberry bug or a VideoJS bug?
I am using youtubes to embed my vidoes and have some elements that should appear on top o the video if clicked on.
This works perfectly on desktop browsers just not on mobiles themselves.
I have tried ?wmode=transparent to no avail.
Does anybody have any other tricks i can try?
See: HTML5 video: possible to place regular html content over video
Your issue may be similar i.e. quicktime player(ios) hijacking that area of the browser. The above link has a few hacks.