Lay Theme Forum

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

    Html5 Video - Full Screen Aspect Ratio

    General Discussion
    3
    12
    699
    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.
    • S
      sebastianpetrov last edited by

      Hello,

      Is it possible for the html5 video player to maintain aspect ratio when going into full screen mode?

      Bonus question and of less importance, is it possible to control the appearance of the standard controls? Maybe remove all standard controls but leave a full screen button in the corner?

      Bonus Question 2: is it possible to upload a custom graphic for that full screen button?

      I understand the bonus questions may need work on the theme, but if there is a way around it, could you point me in the right direction so I can try hack my way through?

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

        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 Reply Quote 0
        • S
          sebastianpetrov last edited by

          Hi @mariusjopen

          Ok, thank you :)

          1 Reply Last reply Reply Quote 0
          • H
            heberbrandao last edited by

            @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 Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @heberbrandao
              can you show us a link?

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • S
                sebastianpetrov @heberbrandao last edited by

                @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 Reply Quote 1
                • H
                  heberbrandao last edited by

                  @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 Reply Quote 1
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    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 Reply Quote 2
                    • S
                      sebastianpetrov @mariusjopen last edited by

                      @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 Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Dear @sebastianpetrov
                        Ah great! Happy to hear!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • H
                          heberbrandao last edited by heberbrandao

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

                          .html5video video {
                          object-fit: contain;
                          }

                          Also worked magically for me!
                          Thanks!

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

                            Perfect! Happy to hear!

                            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

                            H
                            S
                            S

                            Recent Topics

                            • S

                              New fade-in / opacity bug?

                            • A

                              Unable to update lay theme / to login wp admin

                            • A

                              New button feature not available

                            • S

                              Theme crashed - because of Polylang?

                            laytheme.com