-
AuthorPosts
-
March 1, 2018 at 9:06 am #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!
March 1, 2018 at 3:53 pm #919700Hey 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,
NikkoMarch 6, 2018 at 12:00 pm #922173Hi Nikko!
Thank you so much for the response.
I added the code and here’s how the frontpage looks like now.
Do you have any fix for this?
Thank you for your hard work!
March 6, 2018 at 1:01 pm #922220Hi,
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,
NikkoMarch 6, 2018 at 6:01 pm #922441Thank you for the prompt response Nikko!
Here’s how it currently looks like with the most recent code added:
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!
March 7, 2018 at 11:11 am #922845Hi hackoffseries,
Best regards,
VictoriaMay 8, 2018 at 5:15 am #953066Hi 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:
Can you please help me figure this out?
Thank you sooo much! Keep up the great work! :)
May 9, 2018 at 5:51 am #953683Hi 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,
NikkoMay 10, 2018 at 5:28 am #954285Hey 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.
May 10, 2018 at 7:09 am #954389Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.