CMS Development


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:


And here is the code used:


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

 <source src="">


<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
Key Advisor

Optimizing video header?

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





Optimizing video header?

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 -> (sorry it got pretty big, might load for a while).


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