0

I am embedding videos from Vimeo in a container div as follows:

 <div class="video_container">   
 <iframe class="videos" src="https://player.vimeo.com/video/190283538?
 title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" 
 webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>

Then my CSS rule sets the videos' width to 100%. However, they do not fully fit the container div. Inspecting Developer tools on chrome I see that the iframe video has layers of inner divs and there is one in particular with "vp-player-layout" class where the troublesome "left" and "right" values are introduced.

How can I access such inner divs and modify them in CSS? or is there any other solution to resolve this issue.

Thanks.

Matt R. Wilson
  • 7,268
  • 5
  • 32
  • 48
monamona
  • 1
  • 1
  • 1
  • Questions like this have been asked quite a few times already. See here for example: https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe. – yinken Dec 27 '17 at 11:08
  • Does this answer your question? [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – Vega Apr 12 '20 at 05:15

1 Answers1

-2

If you're having trouble, i.e. getting some margins or padding from these extra classes (such as vp-player-layout) you could try a CSS rule for that class, such as:

.vp-player-layout { margin: 0; padding: 0; }

Or whatever applicable rule you need to remove the extra spacing.

Winch
  • 117
  • 1
  • 9
  • 1
    No, this will most likely not work. You cannot change the styling of an Iframe's content unless very specific conditions are met. See link in my comment above. – yinken Dec 27 '17 at 11:11