How do I remove the white frame on videos?

Hi Dane, from my experience, if you use the normal video component and simply paste the video link (not the YouTube video component), it shows the ugly white frame around it. But if you use the embed component, the ugly frame doesn’t show up. You have to go to Vimeo or Youtube and get the embed code and paste it in the embed component. Watch out: you likely would put the embed component inside a div block, check out the div block height, it could be so small that it could look like the video is not there, but it’s actually there. That’s what confused me until I figured it out.

1 Like

Thank you very much Pablo! I will try this way.

You are welcome! These are the sizes I gave to the div block that contains the embed component:
Screen Shot 2022-01-05 at 19.30.37

Thank you for all the tipps. But the thing is that the only platform I host videos on is YouTube. And they don’t offer an embed function. Also you need to have a site-plan to embed something. I tried many things to get the border removed but I didn’t find any way. This is so nerve wrecking…

Never mind. I realized that there is a YouTube Element. I replaced it and the frame is gone. Sorry for the unnecessary reply.

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

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

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

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

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.

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

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

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

User agent stylesheet can be overridden as Stan indicates.

1 Like

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.

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.

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

Thanks! I was added this code and It works.

1 Like

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:

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

Another way that works is

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

^uses the px value you need to trim away