Optimizing video header?


Hi there


I'm trying to create a video banner, but I'd like to know how this would appear for someone viewing on a low-quality connection – and how this can be optimised.


Here is the page preview: https://www.zoodigital.com/services-1?hs_preview=ZDEGLLqX-5419756100


And here is the code used:


<div> <video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="">

 <source src="https://cdn2.hubspot.net/hubfs/2658690/Website%20Banner%20%E2%80%93%20Work%20with%20ZOO.mp4">


<div class="overlay">
    {% widget_block rich_text "banner_text" overrideable=True, label='Banner Text', no_wrapper=True  %}
{% end_widget_block %}




@media only screen and (min-device-width: 374px)

.banner_text_content {
    width: 600px; /* give it a width you'd like it to be */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: #fff;
    text-align: center;

.overlay {
    width: 600px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);


Are there any sites for testing low-bandwidth viewing? And any ideas for improving this experience?


Cheers, Jonny

2 Replies 2

Hey Jonny,


For testing sites on lower bandwith, you can also use Chrome Developer tools. (Press CMD+Option+i to open it in Chrome). From there you can see the bandwith option under Network tab. I made an illustrative GIF -> http://kldr.co/BjtwFA (sorry it got pretty big, might load for a while).


If you need any help further, feel free to email me at hi@sellmx.com and I can help you out.

Key Advisor

Hi @JonnyZOO,


* Optimizing  your video in some optimization video sites like this

* Create one fall back poster image same as video first frame and set as poster attribute in video tag like, 

<video  poster="fallback-image.png">

* fall back poster will help you in mobile and tablet were autoplay video will automatically disable and you should set fall back image.

* fallback image will help you till your video is not loading properly.


Did my post help answer your query? Help the Community by marking it as a solution.


Team TRooInbound