Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Mobile Fixed Background Video

Mobile Fixed Background Video

Scheduled Pinned Locked Moved General Discussion
6 Posts 2 Posters 343 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    mw
    wrote on last edited by
    #1

    Re: Use a video as page background

    I'm trying to create a fixed background video. On desktop everything works fine, just on the mobile breakpoint the video gets cut and isn't fullscreen anymore.

    I could change .coulmn-wrap to position: fixed as well and everything would work,
    however, in the final application this is not an option.

    My html

    <video playsinline="" muted="" loop="" class="autoplay loaded bg-videoo" autoplay=""><source src="https://www.domain.de/wp-content/uploads/2021/06/file-name.webm" type="video/webm"></video>
    

    and CSS

     .bg-videoo {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
      }
    

    In general videos like this work on mobile. Like with this Pen https://codepen.io/chriscoyier/pen/jmXapj?editors=1100
    So it has to have something to do with laytheme.

    Could you help me?

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear @mw

      Have you found a solution recently? also are you able to post a link to your website? šŸŒ


      Talk soon & best wishes
      Richard
      1 Reply Last reply
      0
      • M Offline
        M Offline
        mw
        wrote on last edited by
        #3

        Hey @Richard, no unfortunately not. I've set up a test page
        https://www.markuswindt.de/gfgg/

        right at the mobile breakpoint, the video collapses. It's not a custom mobile CSS issue - deleted all and tested. same behavior.

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mw
          wrote on last edited by
          #4

          @Richard - I've found out that the problem is down to custom mobile layouts.

          Surprisingly, if there is NO custom mobile layout, the video does not work.
          If there is a custom mobile layout the video shows as expected.

          Any Idea how to solve this?

          1 Reply Last reply
          0
          • RichardR Offline
            RichardR Offline
            Richard
            Global Moderator
            wrote on last edited by
            #5

            Dear @mw

            Sorry for the delay over the weekend.
            When inspecting the code šŸ” i removed the following:

            bg-videoo {
                /* object-fit: cover; */
                /* width: 100vw; */
                /* height: 100vh; */
                /* position: fixed; */
                /* top: 0; */
                /* left: 0; */
            }
            

            And added:

            video.bg-videoo {
                max-width: 100vw;
            }
            

            Giving this result:
            Screen Shot 2021-07-13 at 7.38.21 PM.png

            This is of course not full height of the Browser, but is the correct width while keeping aspect ratio of Video - what is your desired (width/height/etc)


            Talk soon & have a wonderful day šŸŒ
            Richard
            1 Reply Last reply
            0
            • M Offline
              M Offline
              mw
              wrote on last edited by
              #6

              Thank you for your answer @Richard . I need the video to be fixed and to cover the whole body (100vh)

              Now I found out that the behavior is down to position fixed, causing this problem in the mobile view. Using your code (or my code) with position fixed is causing this error. Without fixed positioning, everything works as expected.

              Is there something that I need to know about the theme in order to work with fixed positioning? Cause I remember some issues in the past that I had with fixed positioning.

              Would love to hear from you
              Best, Markus

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              I also code custom websites or custom Lay features.
              šŸ’æ Email me here: šŸ’æ
              info@laytheme.com

              Before you post:
              1. When using a WordPress Cache plugin, disable it or clear your cache.
              2. Update Lay Theme and all Lay Theme Addons
              3. Disable all Plugins
              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

              This often solves issues you might run into

              When you post:
              1. Post a link to where the problem is
              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
              Online Users
              A
              alasdair17
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search