[Resolved] Header Video

[sincos]

Hi,
It’s not working for me with mp4…

https://beauceemplois.com/header-video-test/

Can you help me please?

[Tom]

Hi there,

I’m not seeing a Page Header on that page?

[Jon]

Hi Tom,

We have the same problem.

We had an .mp4 looping video on our page header (using page headers), decided to try the same video as an .webm file since the footprint is smaller and the quality is better. We verified the .webm file works in Chrome and Firefox before placing in the GP theme. The .webm doesn’t work. We are running WordPress 4.9.8, GP 2.1.4.

Here are the HTML snippets from each using the “inspect element” functionality from the browser. The two look quite different, not sure if the clue is in there somewhere.

By the way, this is a staging site. I can make any change you’d like me to try as it does not affect 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>	

[David]

Hi there,

could you raise a new topic, you will be able to privately share a link in the Site URL so we can assist.

EDIT: Seen the new Topic 🙂 thanks

[Jon]

Done. See topic #675625

[Author]

Posts