Change SFNT Background

[marshallw]

I am trying to change the site background from an image to a video. However, when I change the code on the global header they video background just hovers above the current system. The nav bar and storefront introduction do not overlay. This seems like a style issue, but not sure what style to apply to my <video> tag.

Thanks,

[Matt Zimmermann]

Hi Marshall,

I have not tested using a video background in a ReadyTheme. Can you post a link to the site?

[marshallw]

It is a dev site that is private.

Here is the block of code though. In global header.

<mvt:if expr="l.settings:page:code EQ 'SFNT'">
<!-- code I want to add -->
<video autoplay muted loop id="myVideo">
  <source src="videos/header_video.mp4" type="video/mp4">
</video>  
<!-- original code --> 
 <mvt:item name="readytheme" param="Load_Image('site_background', g.site_background)" />
    <mvt:if expr="g.site_background:active">
        <mvt:assign name="l.settings:site_image:class" value="' site-image'" />
        <mvt:assign name="l.settings:site_image:style" value="' style=' $ asciichar(34) $ 'background-image: url(' $ asciichar(39) $ g.site_background:image $ asciichar(39) $ ');' $ asciichar(34)" />
    </mvt:if>

</mvt:if>

[Matt Zimmermann]

Hi Marshall,

You might want to move your video element to within <div id="js-site-wrapper" and position it with CSS.

[marshallw]

Still seems to do the same thing. Any thoughts on how to assign it?

[Matt Zimmermann]

Try adding this:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}