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. Html5 Video - Full Screen Aspect Ratio

Html5 Video - Full Screen Aspect Ratio

Scheduled Pinned Locked Moved General Discussion
12 Posts 3 Posters 2.7k 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.
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen
    Global Moderator
    wrote on last edited by
    #2

    Hi @sebastianpetrov

    for all the 3 questions I cannot really help.

    You can edit with CSS the behavior of HTML5 videos. Even the aspect ratio.
    With jQuery you could trigger the fullscreen button.

    I think it is not that difficult. I did something similar once. There are pretty good tutorials online to do this.

    Sorry I cannot help you further. If you have a more specific problem, when you are working on that solution – I am happy to assist.

    Many wishes!

    Marius

    www.mariusjopen.world

    1 Reply Last reply
    0
    • S Offline
      S Offline
      sebastianpetrov
      wrote on last edited by
      #3

      Hi @mariusjopen

      Ok, thank you :)

      1 Reply Last reply
      0
      • H Offline
        H Offline
        heberbrandao
        wrote on last edited by
        #4

        @sebastianpetrov I am also facing the same issue on my website. Did you manage to find a solution for this?

        Usually I have videos on 2.35:1 and whenever I set them in fullscreen, they are somehow cropped. I lose most of the details on both left and right sides.

        S 1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #5

          Dear @heberbrandao
          can you show us a link?

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • H heberbrandao

            @sebastianpetrov I am also facing the same issue on my website. Did you manage to find a solution for this?

            Usually I have videos on 2.35:1 and whenever I set them in fullscreen, they are somehow cropped. I lose most of the details on both left and right sides.

            S Offline
            S Offline
            sebastianpetrov
            wrote on last edited by
            #6

            @heberbrandao No, I did a bit of research as Marius suggested, but I couldn't really figure it out. Would be awesome if this was built into an update of lay theme!

            1 Reply Last reply
            1
            • H Offline
              H Offline
              heberbrandao
              wrote on last edited by
              #7

              @mariusjopen, here is an example of the website I am building:
              http://andreszardenings.com/nahe-shortfilm/.

              In this page the video, is shown with an aspect ratio of 2.35:1, as I said before.

              But when I make it fullscreen, somehow the code cuts the right and left sides and we miss most of the details.
              I've been trying to fix it for a week now, but no luck with that.

              1 Reply Last reply
              1
              • mariusjopenM Offline
                mariusjopenM Offline
                mariusjopen
                Global Moderator
                wrote on last edited by
                #8

                Dear @sebastianpetrov

                ok, I can see what you mean.

                Try to add this into your CUSTOM CSS code:

                .html5video video {
                    object-fit: contain;
                }
                

                Berst!

                Marius

                www.mariusjopen.world

                S 1 Reply Last reply
                2
                • mariusjopenM mariusjopen

                  Dear @sebastianpetrov

                  ok, I can see what you mean.

                  Try to add this into your CUSTOM CSS code:

                  .html5video video {
                      object-fit: contain;
                  }
                  

                  Berst!

                  Marius

                  S Offline
                  S Offline
                  sebastianpetrov
                  wrote on last edited by
                  #9

                  @mariusjopen said in Html5 Video - Full Screen Aspect Ratio:

                  .html5video video {
                  object-fit: contain;
                  }

                  That did it for me! Thank you :)

                  1 Reply Last reply
                  0
                  • mariusjopenM Offline
                    mariusjopenM Offline
                    mariusjopen
                    Global Moderator
                    wrote on last edited by
                    #10

                    Dear @sebastianpetrov
                    Ah great! Happy to hear!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply
                    0
                    • H Offline
                      H Offline
                      heberbrandao
                      wrote on last edited by heberbrandao
                      #11

                      @mariusjopen said in Html5 Video - Full Screen Aspect Ratio:

                      .html5video video {
                      object-fit: contain;
                      }

                      Also worked magically for me!
                      Thanks!

                      1 Reply Last reply
                      0
                      • mariusjopenM Offline
                        mariusjopenM Offline
                        mariusjopen
                        Global Moderator
                        wrote on last edited by
                        #12

                        Perfect! Happy to hear!

                        www.mariusjopen.world

                        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