hi there,
in the video element i use the player.
it offers only one url. so i can offer only one size of video on all srceen sizes?
i often see 3 urls in other solutions so that the file size can be adjusted for the mobile version of the site.
how does yours work? does it automatically deliver a smaller file to smartphones?
or must i choose a medium video size for a compromise?
could nowhere find infos about this question.
thanks and best wishes, kai
Hi @iTurtle,
Thank you for writing in, you can add video source 1 per line.
e.g.
/wp-content/uploads/video/aaaa-optimized.mp4
/wp-content/uploads/video/aaaa-optimized.webm
But that is not for a responsive purpose, the Video element is responsive itself so you should not worry about that.
That is for compatibility purpose, different browser different format. But the most (if not all) modern browser support .mp4 so .mp4 format should be enough.
Video Format for the Web
MPEG-4/H.264 video format
You have the Poster image option which is the alternative for video when viewed on mobile.
Cheers!
hi @friech,
thanks for your reply!
what do you mean with “the video element is responsive itself”?
are your referring to the design or the delivered content?
my question was if the video element will deliver smaller video file on mobile devices.
a 100mb video file would be not nice on a mobile device!
best wishes, kai
Hi Kai,
We are referring to the design. There’s no option in general wordpress and also on theme to show different content. What I mean was, there is HIDE DURING BREAKPOINTS settings, but this option load both the content, it just hides it on different screen view. For videos, you can have the option to set it not to load/start by default. What content we have on desktop is the same content on mobile in terms in delivered content. Design is just different because of responsiveness.
hi lely,
thanks for clarifying!
in other themes i have the option to deliver different file(s) sizes for different screensizes.
will you offer this in the future? i think that would be very useful.
now i have to choose a smaller file size which won’t look good on computer screens…
thanks! and best wishes, kai
Hello Kai,
Your feedback has been noted. This is something we can add to our list of feature requests. This way it can be taken into consideration for future development.
Thanks!
dear @RueNel,
thanks for putting it on your list of features!
i usually use youtube or vimeo where i do not run into this problem. so this is the first time i use that video element.
but i wonder, why that hasn’t been addressed before. is the video element used to seldom?
thanks again and have nice weekend, kai
Hi @iTurtle,
Our theme uses the video library provided by Wordpress to prevent bloating, especially it’s not as simple as image loading. Hence it would require modification of the existing feature given by Wordpress, or if we create our own player library. But yes, it’s good to have feature.
Thanks!
dear @rad,
would it not be quite easy to just offer/refer a different video file (which the user must provide) for different screen sizes? just like the design is responsive for different screen sizes.
best wishes, kai
Hi @iTurtle,
There is simple, and there is a complex one.
One simple implementation is adding multiple video players controlled by @media, and each player contains each file that represents a device. This is similar to HIDE DURING BREAKPOINTS feature, it’s simple but that means all the videos will be downloaded regardless of device. It’s okay for images but will be too slow for videos, a media player instance is heavy if loaded multiple times even if it’s hidden. As a sample comparison, you’ll notice a performance degradation when multiple slider and backgrounds are present on the same page.
Then the complex one is using one single player and controls the file sources through javascript depending on the device, it’s either we create our own video player that has this feature, or edit/customize the player provided by Wordpress. Either one, it would require complex customization.
Thanks!
hi rad,
thanks for explaining!
regarding you first “simple implementation”: if i set the video to not play automatically would all sizes still download regardless of device? not matter what?
thanks, kai
Hello Kai,
Videos will only be loaded once you hit the play button.
If you have several videos on the page, it is only advisable to have one video in autoplay.
Regards.
dear rue!
that is good to hear!
what about what @rad said that “all the videos will be downloaded regardless of device”?
i don’t want any auto play videos on my page, anyways.
i would use 2 video elements. one for small screens and one for bigger screens. that should be ok then. no?
thanks again! kai
Hello Kai,
Inserting two videos should be okay. Just make sure that the video for smaller size will not be in autoplay.
Thanks.
hi rue,
thanks! so it sounds like this was a misunderstanding we had.
so there is a simple solution to my initial request.
thanks again, kai
Hi @iTurtle,
Sorry for the confusion too 
There is a simple solution like I mentioned, but I also provided the downside of it. Like I said, that will be multiple player libraries loading at the same time (multiple instances of the player).
About the video files that will be downloaded at the same time, is yes, the autoplay and or a video with preload setup. Hence it’s only limited but I say it’s not impossible. That simple implementation is also similar to Hide During breakpoints feature which already exists and already recommended by @Lely. So I thought what you’re requesting is a different kind of implementation which is complex compared to other themes.
So yes, please use Hide during breakpoints with your video element, and this only applies for video element and not for background videos since it has autoplay and preload.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.