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. Addons
  3. Magnetic slides 100% viewport height?

Magnetic slides 100% viewport height?

Scheduled Pinned Locked Moved Addons
13 Posts 4 Posters 1.9k 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.
  • alexbrunoA Offline
    alexbrunoA Offline
    alexbruno
    wrote on last edited by alexbruno
    #1

    Is there any way to scale a magnetic slide and its contents to 100% viewport height?

    I'm placing HTML5 videos in each slide and they go to 100% width, which leaves lots of space on the top and bottom. It's OK if the left and right sides of the videos are cut off.

    I've been playing with the styling but can't seem to nail down what can make this work.

    Here's a URL to an example page: http://abrudesign.com/beautytest3/videos/

    Any help is appreciated, thanks!

    Thanks!

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

      Hey alexbruno!

      Yeah, this is a feature that I implemented for youtube, vimeo videos and images. But I still need to make this work for html5 videos as well.

      This is the option that enables the "max-width" and "max-height" in the magnetic slides options screen:
      "Give images and videos a max-width and max-height and center them"

      I'm going to make this work maybe like next week. Will let you know.

      alexbrunoA 1 Reply Last reply
      0
      • arminunruhA arminunruh

        Hey alexbruno!

        Yeah, this is a feature that I implemented for youtube, vimeo videos and images. But I still need to make this work for html5 videos as well.

        This is the option that enables the "max-width" and "max-height" in the magnetic slides options screen:
        "Give images and videos a max-width and max-height and center them"

        I'm going to make this work maybe like next week. Will let you know.

        alexbrunoA Offline
        alexbrunoA Offline
        alexbruno
        wrote on last edited by
        #3

        @arminunruh

        Ah, awesome! That's good to know. I was thought something was weird when I was adjusting the max-width max-height value and no changes were being made.

        Thanks, I'll be on the lookout for any updates.

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          Hey, I just published the magnetic slides update. Let me know if it works for you!

          1 Reply Last reply
          0
          • M Offline
            M Offline
            MAN
            wrote on last edited by
            #5

            Hello!

            I'm trying to accomplish something like this slider with the magnetic slides addon: http://www.wearecollins.com

            I mean: a classic fullscreen slider with the projects. I can't set it up to fit in the browser, reducing the width shows blank space up and down. As alexbruno said, It's OK if the left and right sides are cut off.

            I have "Give images and videos a max-width and max-height and center them" activated with 100%.

            Can it be done?

            Thanks!

            1 Reply Last reply
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              Hey MAN!
              The way to do this is this: http://laytheme.com/how-to-use.html#full-bleed-images
              Full bleed images, essentially row background images with the rows set to height of browser.
              Then you could put some text in those rows that link to your projects.

              1 Reply Last reply
              0
              • M Offline
                M Offline
                MAN
                wrote on last edited by
                #7

                Great, thanks!

                1 Reply Last reply
                0
                • GonzaloG Offline
                  GonzaloG Offline
                  Gonzalo
                  wrote on last edited by
                  #8

                  Hello! I'm trying to do this as well, but it leaves lots of space on the top and bottom.
                  I'm doing it with a mp4 and with a vimeo video, but both have the same issue.
                  You can take a look here: http://work.gonzalosanchez.co/testvideo/
                  Any help would be great, thank you!

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #9

                    Hey Gonzalo,
                    You can activate "Give images and videos a max-width and max-height and center them" and use a percentage like 90% in the magnetic-slides/"fullscreenslider" options. This way your video will always fit into a browser height and width.
                    But there's no way to make a vimeo video fill the whole screen (without borders around) right now.

                    I think in your link you just have a video that spans all columns.

                    1 Reply Last reply
                    0
                    • GonzaloG Offline
                      GonzaloG Offline
                      Gonzalo
                      wrote on last edited by
                      #10

                      Oh, I guess I didn't understand then, so is not possible to have a full screen video, right?

                      1 Reply Last reply
                      0
                      • arminunruhA Offline
                        arminunruhA Offline
                        arminunruh
                        Global Moderator
                        wrote on last edited by
                        #11

                        Yea right.
                        That's a feature that I want to work on one day.

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          MAN
                          wrote on last edited by
                          #12
                          This post is deleted!
                          1 Reply Last reply
                          0
                          • arminunruhA Offline
                            arminunruhA Offline
                            arminunruh
                            Global Moderator
                            wrote on last edited by
                            #13

                            hey MAN
                            I just did an update for the fullscreen slider and now that should work too :D

                            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
                            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