Video Content On Homepage

[tomtomg]

We'd like to highlight the fact that we manufacture items on-site using more traditional methods then some of our competitors (lower quality, bought from abroad). One simple way would be a short video of our machinery running on the homepage.

Does anyone have any pointers on how to go about optimising this, so that the site isn't lagged to high heaven trying to load a video?

Random example I came across, but seems to work without causing any major stuttering: https://www.ronhull.co.uk/divisions/fragmentiser-site

[Mikey]

Hi,

So the two main ways to have video on your site is either from an external source such as YouTube and embed it on your site via an iframe, or host it natively (like in your example link) using the HTML5 'video' tag (the video in the example is in MP4 format, has a duration of 1:15 minutes and a file size of 8.5MB).

Within the video tag you also have options to hide the controls, autoplay the video, continuously loop it etc. If autoplay is specified then the video will start to download immediately. If the user controls when the video is played then you can add an option so it only starts to download once play is clicked (if you do set it up this way you also have an option to add a 'poster' image in the player so people can see what it's about before the video is played/downloaded).

With regard to performance, the best thing to do is run a test before and then after the video is added to compare the results - to do this use this tool from Google:

https://pagespeed.web.dev/

Bear in mind that although adding a video may impact performance slightly, the benefits can outweigh this as it's good for SEO with regard to engagement - especially if it means visitors will stay on your page longer (a strong SEO ranking factor)!!


Hope this helps,

Mike

[Panamint Cinema]

We'd like to highlight the fact that we manufacture items on-site using more traditional methods then some of our competitors (lower quality, bought from abroad). One simple way would be a short video of our machinery running on the homepage.

Does anyone have any pointers on how to go about optimising this, so that the site isn't lagged to high heaven trying to load a video?

Random example I came across, but seems to work without causing any major stuttering: https://www.ronhull.co.uk/divisions/fragmentiser-site

I've created content blocks, which displays videos on You-Tube or Vimeo. You can see example at https://www.panamint.co.uk.

Here is the code:

<table border="0" cellpadding="0">
<tbody>
<tr>
<td>
<p><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" height="360" src="https://player.vimeo.com/video/567045803" width="640"></iframe></p>
</td>
<td>&ensp;<img alt="" src="/images/spacerv.gif" />&ensp;</td>
<td class="vertical"><img alt="" src="/images/spacerv.gif" /></td>
<td align="center"><a href="/abilene-town-blu-ray"><img height="200" width="157" src="/user/products/BLU1009-flat.jpg" /></a>
<hr />
<p align="justify">Based on the novel <em>Trail Town</em> by <em>Ernest Haycox,</em> <i>Abilene Town</i> focuses interest on the evolution of this Kansas village from the reckless cowboy town into a more peaceful community, under the guidance of <em>Randolph Scott</em> with little help from <em>Edgar Buchanan&#39;s</em> bumbling sheriff.</p>
</td>
</tr>
</tbody>
</table>

[Panamint Cinema]

The new V2 templates will also allow videos in slideshows.

We'd like to highlight the fact that we manufacture items on-site using more traditional methods then some of our competitors (lower quality, bought from abroad). One simple way would be a short video of our machinery running on the homepage.

Does anyone have any pointers on how to go about optimising this, so that the site isn't lagged to high heaven trying to load a video?

Random example I came across, but seems to work without causing any major stuttering: https://www.ronhull.co.uk/divisions/fragmentiser-site

[cheesemouse]

The new V2 templates will also allow videos in slideshows.

Only if you host them yourself.

[vapingking]

I've seen a few websites do it well without affecting the load time too much. One tip is to ensure your video is compressed to the smallest file size possible without losing quality. Also, consider using a content delivery network (CDN) to serve the video, which can greatly reduce loading times.


For editing and compressing the video before it hits your site, I've had a good experience with a tool I found at https://www.movavi.com/imovie-for-windows/. It's straightforward to use for cutting down and optimizing videos, so they're web-ready.