Background video zoom - Support | Kriesi.at

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 1, 2018 at 9:06 am #919479

Archie
Participant

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:

Home

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 #919700
Nikko
Inactive Moderator
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
March 6, 2018 at 12:00 pm #922173

Archie
Participant

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!

March 6, 2018 at 1:01 pm #922220
Nikko
Inactive Moderator
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
March 6, 2018 at 6:01 pm #922441

Archie
Participant

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!

March 7, 2018 at 11:11 am #922845

Victoria
Inactive Moderator

Hi hackoffseries,

Best regards,
Victoria

May 8, 2018 at 5:15 am #953066
Archie
Participant
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:

Home

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! :)
May 9, 2018 at 5:51 am #953683
Nikko
Inactive Moderator
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
May 10, 2018 at 5:28 am #954285
Archie
Participant
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?

Home

Thank you!
- This reply was modified 6 years, 7 months ago by Archie.
May 10, 2018 at 7:09 am #954389
Nikko
Inactive Moderator
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
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.