Announcement

Collapse
No announcement yet.

Change SFNT Background

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Change SFNT Background

    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,
    Marshall
    http://www.hmcdisplay.com
    http://www.churchonwheels.com

    #2
    Hi Marshall,

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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      It is a dev site that is private.

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

      HTML Code:
      <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>
      Marshall
      http://www.hmcdisplay.com
      http://www.churchonwheels.com

      Comment


        #4
        Hi Marshall,

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

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


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

          Marshall
          http://www.hmcdisplay.com
          http://www.churchonwheels.com

          Comment


            #6
            Try adding this:
            Code:
            #myVideo {
              position: fixed;
              right: 0;
              bottom: 0;
              min-width: 100%;
              min-height: 100%;
            }
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment

            Working...
            X