https://community.hubspot.com/t5/CMS-Development/Optimizing-video-header/m-p/50702#M3874 <P>Hi there</P><P>&nbsp;</P><P>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.</P><P>&nbsp;</P><P>Here is the page preview: <A href="https://www.zoodigital.com/services-1?hs_preview=ZDEGLLqX-5419756100" target="_blank">https://www.zoodigital.com/services-1?hs_preview=ZDEGLLqX-5419756100</A></P><P>&nbsp;</P><P>And here is the code used:</P><P>&nbsp;</P><PRE>&lt;div&gt; &lt;video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height=""&gt; &lt;source src="https://cdn2.hubspot.net/hubfs/2658690/Website%20Banner%20%E2%80%93%20Work%20with%20ZOO.mp4"&gt; &lt;/video&gt; &lt;div class="overlay"&gt; {% widget_block rich_text "banner_text" overrideable=True, label='Banner Text', no_wrapper=True %} {% end_widget_block %} &lt;/div&gt; &lt;/div&gt; &lt;style&gt; @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%); } &lt;/style&gt;</PRE><P>Are there any sites for testing low-bandwidth viewing? And any ideas for improving this experience?</P><P>&nbsp;</P><P>Cheers, Jonny</P> Fri, 24 Nov 2017 15:19:51 GMT JonnyZOO 2017-11-24T15:19:51Z