Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Videos & Single Images width & height

    General Discussion
    2
    12
    294
    Loading More Posts
    • 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.
    • T
      this last edited by

      Hey Guys
      I have a simple split screen scenario where I present content on either side. I figured our how to keep the carousell slider "Fullscreen" (on one side of the screen) all of the time, but single images and videos still get resized the wrong way (white space on the left/right side or on top/bottom), depending on the size of the Browser window.

      Examples of a single image: https://thisisthis.ch/rush-hour

      Example of a video: https://thisisthis.ch/durst

      I'd like the single images and videos to be resized to fill the right side all of the time, no matter the Browser window size.
      Like this carousell slider for example: https://thisisthis.ch/versus_installation/

      Thanks for any Tips!
      Cheers

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @this
        you can do that with CUSTOM CSS.
        Have a look at object-fit: cover.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • T
          this last edited by

          Dear Marius
          Thank you for your Feedback, I created a class .videothis for the video and added

          .videothis {
          height: 100vh !important;
          object-fit:cover !important;

          }
          But this is the result:
          https://thisisthis.ch/durst

          any ideas what I could be missing?
          I tried a lot but I can't seem to strech it over the whole side when.
          When the window is resized to a smaller desktop/Tablet size, the video keeps at full width, but sticks it to the top?
          Thank you!
          Joel

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @this
            probably you need to also adress the video inside your class.

            .videothis
            video  {
            height: 100vh !important;
            object-fit:cover !important;
            }
            

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • T
              this last edited by

              Dear @mariusjopen
              With the video beeing also adressed, it just sticks to the bottom now:
              https://thisisthis.ch/durst

              Maybe this example gives you another idea/hint of where the problem may lay?
              Thanks a lot!
              Joel

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @this
                play around with the parent classes:

                .videothis {
                    height: 100vh;
                }
                

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • T
                  this last edited by

                  Dear @mariusjopen
                  I tried that already, this snippet simply sticks the video to the top, but it doesn't cover the whole height or get's scaled up in any way...
                  Would you like to have access to the site so you can see more details?
                  Best
                  Joel

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @this

                    .html5video {
                        position: relative;
                        height: 100vh;
                    

                    This is what I meant with parent classes.

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • T
                      this last edited by

                      Dear @mariusjopen

                      It works!
                      Only problem is, the .html5video class also effects other elemtens like the one on the right side of the homepage. This Video now moves up?!

                      I added a sketch for reference because I didn't want the snippet to stay in there.
                      I tried to switch classes or to reset some properties in another class, added to that video on the homepage - without success...

                      Also I was not able to strech a single image the same way like the Video, I tried adding the snippet to the .img class and added my own class .einzelbild to the image in the lay editor, but I could not get it to work...
                      https://thisisthis.ch/rush-hour

                      Thank you so much for all your help!
                      Joel !

                      0_1565263047576_Snippet.jpg

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Dear @this
                        as well you need to give 100vh to the video element. Use object fit. And of course to the parent element to give it the space to stretch out.

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • T
                          this last edited by

                          Dear @mariusjopen

                          I did give "height: 100vh;" to the video element as you suggested, but this resulted in a missplaced video element on the front page, as shown in the screenshot above.
                          I also added "object-fit: cover;" to the parent element (which is .ph I think?), but it didn't help.

                          Here's all the costum CSS I use right now, maybe you see a flaw?

                          .col .lay-carousel {
                          height: 100vh;
                          top: 0px !important;
                          margin-top: 0px !important;
                          padding: 0px !important;
                          }

                          .flickity-slider {
                          height: 100vh;
                          top: 0px !important;
                          }

                          .lay-carousel-slide {
                          top: 0 !important;
                          height: 100vh;
                          margin-top: 0px !important;
                          }

                          .col .lay-carousel img.h100 {
                          height: 100vh !important;
                          top: 0;
                          object-fit: cover!important;
                          width: 100%;
                          }

                          .videothis video {
                          height: 100vh !important;
                          object-fit:cover !important;
                          }

                          .html5video {
                          position: relative;
                          height: 100vh ;
                          object-fit: cover !important;
                          }

                          .ph{
                          object-fit: cover !important;
                          }

                          1 Reply Last reply Reply Quote 0
                          • mariusjopen
                            mariusjopen Global Moderator last edited by

                            Dear @this
                            I added this and it works:

                            video {
                                object-fit: cover !important;
                                height: 100vh !important;
                            }
                            

                            :-) ?

                            Best!

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post

                            Before you post

                            Use the Search Feature. Maybe there is already a solution to your issue.

                            1. Update Lay Theme and all Lay Theme Addons
                            2. Disable all Plugins
                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                            4. Now see if your problem solved itself
                            5. Go here, see if your problem is listed here:
                            Troubleshooting

                            When you post:
                            1. Post a link to where the problem is
                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                            Thanks!

                            Online Users

                            S

                            Recent Topics

                            • T

                              OpenType Feature

                            • T

                              Split Screen just on front page / subpages without the split?

                            • T

                              problem when I click on the category filter buttons on mobile

                            • G

                              z index has different behaviors on different pages

                            laytheme.com