Archived topic
Page Hero Video
5 replies · Started by mzsstade on December 14, 2021
Hi there,
how can I display the video control like ”Play" and so on? And do I need the poster.jpg-File?
Page Hero Background Video
Adding a background video to our Page Hero is super easy. We just need to add some HTML into the content area, and add some CSS to our site.
The first thing we need to do is structure our HTML within our Element content. Here’s an example:
<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
<source src="URL/TO/video.mp4" type="video/mp4">
<source src="URL/TO/video.webm" type="video/webm">
<source src="URL/TO/video.ogv" type="video/ogv">
</video>
You find my page under: https://artemis-collection.de
Kind regards Sven
Hi there,
you can add Controls to a Video HTML element by adding the controls attribute to its markup eg.
<video controls loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
More info on the various attributes here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
But you may find they are pretty redundant if the video is positioned behind content....
The poster.jpg ( or whatever name you save the file as ) provides a preloading image, so it displays something before the video loads and in place of the video if the users browser doesn't support video or they chose to disable ti.
Hi David,
thanks for your answer, I choose the standard video block from Gutenberg, because your code won't work on my mobile phone, there is only a blank Header and the video don't start.
Yeah when you add the controls option it will affect the autoplay option.
Does the video block work ok for you then?
Hi David, yes the video Block works for me. Thanks for your help.
Glad to hear that!
