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
I'm trying to implement custom video controls with JS. I'm able to get it work on the Firefox, Chrome and IE. But in the IE11 when a user went to fullscreen mode the custom control bar is not visible.
Please help me.
I have html5 video tags of videos.
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Even tried using video.js, no change.
I read that this is a problem because the videos originated in iOS.
so 2 questions:
1. How can I still overcome this issue. Really there is no solution?
2. (out of curiosity) - how does chrome manage to overcome this?
Example of a URL (scroll down a bit in the chapters to see a vertical video):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
I read that this is a problem because the videos originated in iOS.
All videos recorded using mobile devices will contain rotation metadata including those from iOS and Android devices. It can take 4 values: 0 (tilted left), 90 (portrait), 180 and 270:
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Firefox and IE 10 are the only major browsers not supporting the rotation metadata. Here's Firefox compared with Chrome:
The latest version, Firefox 42 as of today, still does not support it. IE11 and Edge 12,13 do support it.
List of mobile/desktop players that support the rotation info: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
How can I still overcome this issue. Really there is no solution?
See this answer for the solution, basically you need to :
rotate videos using FFmpeg (so Firefox and other browsers that do not support the rotation metadata show the video properly)
remove the rotation metadata (so that other players don't rotate the video since it's already been rotated by FFmepg)
Images courtesy of: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
Since the problem is with some iOS specific encoding options, which many NOT-Apple Players can't read, the easiest solution I can think of is to trancode and rotate the video.
Which was already discussed in oh so many posts on the web and here at SO... e.g.:
Video orientation using video.js
HTML5 mp4 video with firefox resizing video
Chrome HTML5 Video Flipping Portrait Sideways
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
I am guessing that Chrome is respecting the width="360" and height="640" attributes of your <video> tags, while Firefox is not. If I download one of your videos and play it back in Media Player Classic, again the orientation is incorrect. But just like in web browsers, there are inconsistencies: the same video opened in VLC player plays back with the correct orientation.
I would recommend that, if you can, you re-encode the videos using a (free) program called AVIdemux. I just tried it on one of your videos, and it worked well with minimal effort. As a bonus it shrunk your video down considerably, with only minimal quality loss.
Here are the steps:
Download AVIdemux from http://www.fosshub.com/Avidemux.html
Install and run AVIdemux
Go to File menu and choose Open. Pick the video to re-encode.
Go to Video menu and choose Filters
Choose Transform > Rotate (double-click) > Rotate by 270 degrees (OK)
Click the Preview button to check the output
Click the Close button
In the main window, under Video Output, choose MPEG4-AVC (x264)
Under Output Format, choose MP4 Muxer
Click the Save Video icon, and in the resulting window type a filename and click the Save button.
Then you will need to re-upload your video.
Probably not really a viable solution but adding a CSS rule such as
video {
-moz-transform: rotate(90deg);
}
would at least make the videos play back in the correct orientation in Firefox. Problems with this:
videos that play back in the correct orientation without the rule will play back in the wrong orientation with the rule
the video controls also get rotated
the posters will display in the wrong orientation
I see your site uses video.js. It might be worth looking at https://github.com/xbgmsharp/videojs-rotatezoom ?
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?
I append iframes containing vimeo embed code to a website, hide the iframes and display the first one when it is loaded.
Works in: Chrome, Safari, Firefox, IE 9-11 on Win7 and IE10 on Win8
Does not work in: Internet Explorer 11 on Win8.1
It shows me a black box, I can press the invisible play button and there's sound, but there's nothing to see.
Funny thing: by resizing the browser window the iframe magically appears and video playback works.
There are some oddities relating to loading players from a display: none state. For now you could try a workaround I've used a few times and that is firing a fake resize event when you want the player to load, something like this:
window.dispatchEvent(new Event( 'resize', true, true ));
(Sorry for any typos, I'm on my phone.)