Responsive video

[IvanTheEditor]

i am a video editor and i just built my responsive portfolio website only to find out that all the videos are resulting in one big mess on the mobile devices. The simplest way i can explain what i’ve done is this: i have a video embedded as html5 on a page. In the largest breakpoint the video is set to 960 width and it’s set to only show in that breakpoint. In the next breakpoint, i have the same video embedded again as html5 but smaller and it’s also set to only show in that breakpoint. Then I have a 3rd breakpoint, the smallest one- same thing. All is great if no one is resizing anything but here’s the problem: if i start playing the video and then change the size of the browser the video will continue to play in the background but it disappears from the screen because now the browser is displaying the video from the new breakpoint. No one really resizes screen on desktop but on mobile it’s a total disaster. If you start playing the video and then you flip your phone in horizontal position to watch it bigger the video disappears from the screen but keeps playing in the background.

does that make any sense?

what’s the workaround that?

my website is www.ivantheeditor.com

[Preran]

Can you provide us with a link to your site so that we can test it ourself? Also, are you using the widget within Muse or a third party widget to embed the video?

[Pavel_Homeriki · Accepted solution]

IvanTheEditor  написал(а)

If you start playing the video and then you flip your phone in horizontal position to watch it bigger the video disappears from the screen but keeps playing in the background.

I did not see any problem. On my smartphone (Android 7) works fine. But you should know that on different devices with selfhosted video can be a problems. To work correctly on all mobile devices, you need to upload a large number of video options with different extensions, for different codecs. And all this should be added in the source code. Therefore, the best practice, if you are not a programmer - is to use YouTube, Vimeo and other video hosting services to place video on pages for mobile devices.

[e.reed.rogers]

I would strongly advise taking Pavel's suggestion preferably using Vimeo to avoid the existing YouTube issues. Those services will do all the "heavy lifting" for you.

Since the very first Muse beta, I've learned the hard way that not every device will display as you have intended. As frustrating as it is, it's just the nature of the beast and you just have to resolve yourself to it.