Archived topic
Webm video not working on page header
6 replies · Started by Jon on September 12, 2018
Hi,
We have a page header with a background video that works when using a .mp4 file. We changed to an .webm file in the Page Header and get only a blank where the looping video is supposed to be.
Here is the html snippet using the "inspect element" functionality from the browser.
(Note: I updated issue #350842 with this same information, but after updating noted that the issue was marked "resolved", so I'm opening a new issue here)
(Note 2: This is on a staging site, so I can make any change you like without affecting production)
=== WEBM ===
<div id="page-header-4278" data-vide-bg="webm:http://atticus-blue.com/wp-content/uploads/WebM_HIghQuality.webm" data-vide-options="posterType: none, className:generate-page-header-video, loop:true, muted:true, autoplay:false" class="page-header-content parallax-enabled fullscreen-enabled generate-page-header generate-content-header" data-parallax-speed="2" style="height: 467px; background-position: center 0px;">
<div class="inside-page-header-container inside-content-header ">
<div class="page-header-content-wrapper grid-container grid-parent">
<div class="generate-inside-page-header-content page-header-content-container">
<h1>
<div style="font-family:Verdana,Geneva,sans-serif;font-weight:bold;margin-top: 3em;line-height:150%;color:#ffffff">Leading Conversations for Companies That Lead
</div>
</h1>
</div>
</div>
</div>
</div>
=== MP4 ===
<div id="page-header-4278" data-vide-bg="mp4:http://atticus-blue.com/wp-content/uploads/photos/pages/HD720.mp4" data-vide-options="posterType: none, className:generate-page-header-video, loop:true, muted:true, autoplay:false" class="page-header-content parallax-enabled fullscreen-enabled generate-page-header generate-content-header" data-parallax-speed="2" style="height: 467px; position: relative; background-position: center 0px;">
<div class="generate-page-header-video" style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-image: none;">
<video loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; opacity: 1; width: 1265px; height: auto;"><source src="http://atticus-blue.com/wp-content/uploads/photos/pages/HD720.mp4" type="video/mp4">
</video>
</div>
<div class="inside-page-header-container inside-content-header ">
<div class="page-header-content-wrapper grid-container grid-parent">
<div class="generate-inside-page-header-content page-header-content-container">
<h1>
<div style="font-family:Verdana,Geneva,sans-serif;font-weight:bold;margin-top: 3em;line-height:150%;color:#ffffff">Leading Conversations for Companies That Lead
</div>
</h1>
</div>
</div>
</div>
</div> Following.
Hi there,
Page header has actually been replaced with the new page hero module in Header Element:
https://docs.generatepress.com/article/header-element-overview/
Can you try this method instead?
https://docs.generatepress.com/article/page-hero-background-video/
Let me know if this helps :)
Thanks for your reply. This is my first foray into elements. I'm following the instructions and I think I am getting close. I have a few questions that perhaps you can help.
1. On the elements page / page hero, if the element padding has no value, the video is a thin ribbon only as high as the text that is in the "background-video-content" div. Playing around with the padding top and bottom values opens up the video somewhat. Is that the way it is supposed to work? If so, can you explain or point to documentation where it is explained? The video provided didn't give any answer.
2. There seems to be a mask, an overlay, over the video that gives it a hazy quality. I can't find where this property is set, and it wasn't there before we converted to elements. It does not seem to make a difference if the background overlay box is checked. Where is this property set?
1. Yup the size of the page hero depends on the padding (unless you are using full screen option). Perhaps the examples on this page would help:
https://docs.generatepress.com/article/page-hero-examples/
2. Can you link me to the page in question?
It is a staging site, atticus-blue.com
In the CSS part here:
https://docs.generatepress.com/article/page-hero-background-video/
Remove the opacity: 0.5; line.
See the last sentence in that article for explanation.
