CODEWITHSUNDEEP
htmlcssvideoiframe
monamona
monamona

Reputation: 1

Unwanted side margins on embedded iframe video from Vimeo

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.

Upvotes: 0

Views: 3643

Answers (1)

Winch
Winch

Reputation: 147

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.

Upvotes: -2

Related Questions