CMS Development

JonnyZOO
Mitwirkender/Mitwirkende

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">

</video>

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

    </div>
    


</div>

<style>

@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;
    top:55%;
    left: 50%;
    transform: translate(-50%, -50%);
}


</style>

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

 

Cheers, Jonny

0 Upvotes
2 Antworten
TRooInbound
Autorität

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

 

 

 

0 Upvotes
Sellmx
Mitglied

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 -> 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.

0 Upvotes