I have a 16 seconds video (no audio) that I have optimised using the 720p/30 Web preset in HandBrake. The file size after optimisation comes to 5.3MB. Is this a reasonable size for the purpose of using it as a background video on a landing page?
The optimisation uses H264 video encoding as opposed to H265 encoding which is much better at compressing files to smaller sizes. Has anyone used H265 which I think needs more processing power to playback? - Not sure if the latest browsers (Safari and Chrome) support H265 playback.
Is it better to have such a video as a local resource or is it better to call it from Vimeo or YouTube?
Dropped the frame rate from 30 to 25, files size drops to 2.3MB but playback is a bit jerky (not smooth).
Using H265 encoding did not reduce file size.
The 720p/30 preset at 5.3MB still provides the smoothest playback. Will this be fine as a local asset when the project is uploaded to a hosting server or is it better to pull the video from Vimeo/YouTube?
It will always be better to use YouTube or Vimeo as they have massively effective optimization software on their end (which takes away the need for you to optimize the video) and you’re able to leverage their CDN, giving similar performance all over the globe.
If you are hosting this yourself, the best performance will only be optimum for visitors near the physical location of your hosting provider.
I’ve uploaded the 720p/30 (5.3MB) video on YouTube as an unlisted video, copied the link and added it to the YouTube/Vimeo embed code in Blocs - the part that contains the URL between the quotes but it does not seem to pick-up the video. It does not appear in the little preview section.
What am I doing wrong?
When I add a video bric, the default or sample Blocs video from YouTube plays without a problem.
You should use the embed code, which would look something like this:
<iframe width=“560” height=“315” src=“YouTube” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen…/iframe>
Hi @Mattheus - Thank you for your kind help, that definitely makes sense. I’m sure there is a way to get that embed code from YouTube. Let me google it.
If you host locally, the video can be set to autoplay and loop automatically. However, I think when using YouTube, one of the limitations is that you can’t force it to loop. Autoplay should be possible if the video doesn’t have a soundtrack. If it does, many browsers will refuse to autoplay the video.
Thank you @hendon52 - I tried to resolve the issue and it it finally worked but when the YouTube video ends, it puts up all these other video suggestions which looks a bit unprofessional on a website. Looping the video presented its own challenges. Tried Vimeo and was faced with similar challenges. Furthermore, both platforms introduce their brands within the video area which I don’t mind but at times you need a clinical and non-cluttered look.
I finally resorted to local hosting and it seems to be working fine. Furthermore, I have access to all the important features such as auto play and loop. Just to clarify, my video has no audio.
I can now understand why people shy away from using videos creatively in their website projects. Hopefully, with video codecs getting better, local hosting will be effective in the future. I’m not sure why HandBrake did not optimise my video file further when I chose H265 (HEVC) but maybe the algorithms are based on certain thresholds in terms of file sizes. It is certainly better than H264 in terms of being bandwidth friendly without comprising quality too much. I suppose it is not too popular because it is processor intensive for playback.
I think the 720/30 preset is just fine ( I use as standard for all BG video loops). What is more important in handbrake is to ensure that you select the Fast Decode option in the Video tab, and check the Web Optimized & Align A/V start options in the Summary tab. This doesn’t reduce file size, but it does ensure the video starts streaming before it has fully loaded. In the scheme of things, a 5.3 mb video file is not so much of a heavy file to have on your local server. The only time it may be a problem is if your hosting company places file storage or bandwidth restrictions on your hosting account.
Thank you @hendon52 - that is really useful to know. I will open my video file in HandBrake and go over those settings.
By the way, have you tried 720/25? - not sure if it becomes choppy as a BG video loop compared to 30fps when viewed in a browser such as Safari or Chrome.
Hi @hendon52 - I noticed that there is a preset in HandBrake called Very Fast 720p30. I notice that when I select this, it sets the Encoding Options slider arrow under Video to veryfast. I can then select Fast Decode. Finally, I go into Summary and select web optimized. Is this what you do?
The difference is that the Vimeo Youtube 720p30 preset moves the Encoder Options slider to the medium setting. the rest can be set-up to be the same.
@Samazar - I produce TV commercials for a living so my reel is my resume. I use Vimeo Plus ($84 annual). If you’re going to live and die using video, I would pay for the service and be done with it. Being able to embed the code into Blocs and use the features of Vimeo will make for a clean presentation. My site is 90% video, some photos and a link to a pdf of my resume. All the videos I have on Vimeo have been uploaded at all sorts of resolutions. 1080HD, 2K, ProRes etc. You can also customize how the video player is configured. My 2 cents. (www.itbeis.com) Good luck friend!
