How do I remove the white frame on videos?

Design help Custom code
21

Here is another simple CSS tip to remove border from video eg. YT

<style>
	iframe{
		border: none;
	}
</style>
3 Likes
22

Happening to me as well. Is this a bug? I don’t recall this happening in the past.

23

This is definitely either a bug or a change in the default behavior of Webflow’s video component. I started seeing this on a new site I’m working on, double-checked previous sites and it wasn’t there. Webflow’s video component uses Embedly to embed videos (a third party tool that just takes your video URL and standardizes the embed behavior regardless of platform). Previously the Embedly code that was generated from the video component added in a frameborder=“0” attribute to the resulting

Right now the only fixes appear to be those above - use the HTML Embed component manually, or add the style code @Stan provided. I’ve opened a ticket with support, so hopefully they can fix the issue.

1 Like
24

Anyone else also not able to fullscreen the video as well? Not sure if it’s just my not “officially” supported video or also a bug.

25

Hi @nealwhite to know why is a border around <iframe> you should read MDN documentation for<iframe>. You will find that frameborder is 1 by Default and there is several ways how to remove it.

from MDN Doc

The value 1 (the default) draws a border around this frame. The value 0 removes the border around this frame, but you should instead use the CSS property border to control <iframe> borders.

thas why IMO you should reconsider report this standard behaviour as a bug

MDN Doc for iframe

28

Can someone from Webflow fix this? This is definitely a more recent glitch pretty annoying

1 Like
29

Hi @Zak_Hunter it is not a glitch, please read MDN doc about <iframe> I have posted.

30

User agent stylesheet can be overridden as Stan indicates.

1 Like
31

I’m having the same issue. The video element in Webflow should NOT be adding the border, so I agree this is a more recent change and should be addressed.

32

My issue is also that the fullscreen option is hidden. The Vimeo video settings are set to allow fullscreen. This definitely seems to be a bug.

33

Would you happen to know why the fullscreen button is also missing? Is that another issue with <iframe> behavior?

34

Thanks! I was added this code and It works.

1 Like
35

Hi there! Would you be so kind to let me know where this is supposed to go in your embed code (if that’s where it goes?)

This is what I have for my Vimeo embed currently:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/721794946?h=cec50a1bdc&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;autoplay=1&amp;muted=1&amp;background=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Wizbanger Tech Welcome Video (4k).mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

The weirdest thing is occurring for me with these borders - they don’t appear in screenshots/screen recordings, but they are there in my mobile browsers. See here

Appreciate your help (or anyone else who wants to chime in - @forramil I saw you figured it out?) Thanks :slight_smile:

36

hi @Miles_Mitchell did you placed provided code <style> iframe{ border: none; } </style>into site custom code head?

EDIT: One more thing instead an old padding hack we have now aspect-ratio instead.

1 Like
37

Another way that works is

clip-path: inset(10px 20px 30px 40px);

^uses the px value you need to trim away