Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #919479

    Hi there Enfold team!

    I am using a Vimeo link as a background video to a color section, but I noticed the video is too “zoomed in” and that only about 70% of the video resolution is displayed.

    Here’s how the background video looks like on the home page:

    And here’s the Vimeo link to the video:

    As you can see on the home page, around 30% of the bottom section of the video is cropped and not displayed.

    Is there anything we can do to display the video exactly as it looks like on the original Vimeo link? I would love to have the entire video resolution displayed. I am using a 16:9 and the video is uploaded as 1080p. Should I upload it to another video hosting?

    Thank you!

    #919700

    Hey hackoffseries,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top.home #av_section_1 .av-section-video-bg iframe {
        width: 100%!important;
        height: 100% !important;
        top: 0 !important;
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #922173

    Hi Nikko!

    Thank you so much for the response.

    I added the code and here’s how the frontpage looks like now.

    http://prntscr.com/inihe0

    Do you have any fix for this?

    Thank you for your hard work!

    #922220

    Hi,

    You’re welcome, can you try adding this css code also:

    .home #wrap_all #av_section_1 {
        height: 60vh !important;
    }

    Let us know if you need more adjustment to it :)

    Best regards,
    Nikko

    #922441

    Thank you for the prompt response Nikko!

    Here’s how it currently looks like with the most recent code added:

    https://prnt.sc/innhkb

    Is there any we can remove the play button and other Vimeo stuff at the bottom? Ideally I would like it to look like how it was before we added all the code, but without the video zooming in too much.

    Thank you!

    #922845

    Hi hackoffseries,

    Best regards,
    Victoria

    #953066

    Hi Nikko and Victoria!

    I made some adjustments with the width, height from the code Nikko sent me:

    #top.home #av_section_1 .av-section-video-bg iframe {
        width: 100%!important;
        height: 110% !important;
        top: 0 !important;
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
    }
    
    .home #wrap_all #av_section_1 {
        height: 110vh !important;
    }

    Here’s how the background video looks like on a screen with 1366×768 resolution:

    However, it looks weird on a screen with 4K resolution:

    https://prnt.sc/jf3e2g

    Can you please help me figure this out?

    Thank you sooo much! Keep up the great work! :)

    #953683

    Hi hackoffseries,

    I don’t recommend using this value:

    height: 110vh !important;

    since it would exceed more than 100% of the height of the screen however if that works for you then I think you can keep it that way. as for the 4k resolution and probably screens that are large as well, try adding this code:

    @media only screen and (min-width:1920px) {
      .home #wrap_all #av_section_1 {
        height: 100vh !important;
      }
    }

    this code would affect screen resolutions of 1920px and above.
    Hope this helps.

    Best regards,
    Nikko

    #954285

    Hey Nikko!

    Thank you so much for your response. Here is the setting I have currently.

    
    #top.home #av_section_1 .av-section-video-bg iframe {
        width: 100%!important;
        height: 115% !important;
        top: 0 !important;
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
    }
    
    .home #wrap_all #av_section_1 {
        height: 100vh !important;
    }
    
    @media only screen and (min-width:1920px) {
      .home #wrap_all #av_section_1 {
        height: 100vh !important;
      }
    }
    

    I kept the height at 115% so that it doesn’t zoom out too much and crop the bottom part of the video, however there are blank spaces on both side, if I reduce the value of the width the video goes to the left, when you add the video moves to the right.

    What values do you recommend to make this work for HD, FHD and UHD screen resolutions?

    Thank you!

    • This reply was modified 6 years, 6 months ago by Archie.
    #954389

    Hi hackoffseries,

    I checked on it again and it seems the code I gave you also causes some issues, please try to remove the height and width from this code:

    #top.home #av_section_1 .av-section-video-bg iframe {
        width: 100%!important;
        height: 115% !important;
        top: 0 !important;
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
    }

    to:

    #top.home #av_section_1 .av-section-video-bg iframe {
        top: 0 !important;
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
    }

    Let us know if this helps.
    Btw, I’m using FHD and removing that code in web inspector makes the video show the whole screen without any blank spaces on the sides.

    Best regards,
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.