Search code examples
csswordpresstwitter-bootstrapiframevimeo

CSS 1 px border with responsive bootstrap, Vimeo embed, and WordPress theme


I have a problem with the embedding of a video in my WordPress theme with Vimeo. 1px border of the Vimeo background on the left side of the video embed shows up (in Chrome). Bootstrap is also implemented with this theme.

Basically when the Vimeo iframe is embedded it show a very thin black border at the left that is the Vimeo default background for its iframe. We have a white background so it is very noticeable on some pages. If you view source the basic embed is:

<div>
   <iframe src="http://player.vimeo.com/video/64685575" width="940" height="528" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

But the actual embed is much more complex and has bootstrap fluid styles put onto it and such. I have tried inspecting all the elements and editing them but can't figure it out. Good example of a page having this problem is: http://www.universityoffashion.com/disciplines/fashion-art/


Solution

  • This answer is incorrect. .player .video-wrapper is in the HTML document loaded into the iframe, therefore !important does nothing since the iframe literally loads a different web page inside of the frame which is in no way affected by the local CSS. There have been multiple reports of this problem on Vimeo over the past year, and they are essentially non-responsive.

    My solution was just to put my iframe inside a div with position: absolute, top: 0, left: 0, width: 100%. That width is 100% of the parent of the div, which in my case is constrained by the column widths in my responsive layout. This actually works, unlike the answer previously marked correct.