Background video size

Design help General
#1

Hi all,

I am trying to use a background video for a thumbnail.

I have uploaded it the same size as the image next to it.
But it seems to display some sort of random size? :confused:

I really want it to display the correct size.
Iā€™ve seen a few posts on here using custom code to fix this issue.
Is there a way to do this in webflow?

Any ideas?

Share link: https://preview.webflow.com/preview/website-4bb32c-4d3e757d57ce8edf9b7eda56?preview=44da2aea1d35b5152d2fa70d758fb3e3

34
Screen Shot 2018-08-05 at 11.52.34.jpg2410Ɨ1450 405 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Video Background for mobile devices
#2

First, this is not a specific issue ofbackground-video (See ā€œempty div exampleā€ below)

Why? You combine real images with bg-images/videos/color==== The div is empty!! & the height of the element set bypadding/min/max-height/height) ā€“ for example:
image

And this is whats happen when i remove the height property (The video ā€œdisappearā€):
image

Solution:

Try this trick (No custom code - but this is not dynamic (If in the future you change the sizes of the ā€œrealā€ images you should also change thepadding-top %)

image

Why padding-top: 76.3%;?

Images size: 908 (width) / 1190 (height) X 100 = 76.3%

Empty div example:

Same idea with regular div with red background (To demonstrate this is not video issue)

image
image.jpg1922Ɨ953 274 KB

Read more here:

2 Likes
#3

this looks excellent :slight_smile: going to try it now

thanks once again

#4

Why padding-top: 76.3%; ?

Images size: 908 (width) X 1190 (height) X 100 = 76.3%

^ is that right? I canā€™t seem to get 76.3% :thinking:

#5

sorry. Divide.
(908 / 1190) = 0.76302

1 Like
#6

ahh yes! thanks, that was driving me nuts :slight_smile:

1 Like
#7

25
Screen Shot 2018-08-06 at 14.46.25.jpg1434Ɨ1086 201 KB
46
Screen Shot 2018-08-06 at 14.46.46.jpg2528Ɨ1870 623 KB

any idea why the video seems to be chopping off the top?

in this case, his head

#8

No background-size: cover; for videos. The background-idea is more for a sky, clouds and so on (Not for content like faces -or- text). Maybe also this % trick wont work well with webflow styles.

Solution (maybe)

Webflow adds the video element (by js) - and add styles - so you must use custom code:

image
image.png1663Ɨ328 54.4 KB

With inspect element this solve this issue (copy-paste before head)

<style>
   .w-background-video > video {
       width: 100%;
   }
</style>

before

image
image.png1667Ɨ748 235 KB

After

image

2 Likes
#9

Thank you again loads. Iā€™ll try this trick and let you know if it works :slight_smile:

#10

So the custom code works :slight_smile:
But only when I publish it. It doesnā€™t work when I look in preview?

Is this normal?

#11

Great ! :slight_smile: Yes. Custom CSS ā€œworksā€ only on live url (Like JS).

1 Like
#12

Ahhh I didnā€™t know this. Thanks again!

#13

Hey again! Iā€™m having trouble putting a background video on one of my pages.

Starting to think it might be that custom code interfering?

Basically it doesnā€™t seem to display.

33

If you could help again would be much appreciated!

Its on the SoftBank case study.

Share link - https://preview.webflow.com/preview/website-4bb32c-4d3e757d57ce8edf9b7eda56?preview=44da2aea1d35b5152d2fa70d758fb3e3

#15

@ryan585 i dont see any video under this page. Write me in private - this Q not related to all users. Thanks

1 Like