Archived topic
Site Header & WEBM
3 replies · Started by Caleb Carroll on November 7, 2018
Looked through and searched but couldn't find exactly what it is I'm looking to do. I've tried to modify some existing code / support docs to get what I want done-done but to no avail.
Basically what I'm trying to do is get a WEBM / MP4 to play in the SITE header. I easily went through this guide - https://docs.generatepress.com/article/page-hero-background-video/ - for the PAGE headers and it worked, but it wasn't what I was going for... I want what that guide does, to happen in the SITE header.
Any ideas?
Hi there,
You could try to add this into the Before Header Content hook:
<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>Adding Hooks: https://docs.generatepress.com/article/hooks-element-overview/
Then this CSS:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
.site-header {
position: relative;
overflow: hidden;
}
.site-branding, .site-logo {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}Let me know :)
tom you beautiful bearded man you. Worked wonders. Not sure why I didnt think about hooks, it's been too long since I've used GP this in depth and they were moved >.<
haha glad I could help! :)
