Embedded video css only work in html inline. not when i try and create a class. (code is to get rid of black bars in Vimeo resolution)

Embedded video css only work in html inline. not when i try and create a class. (code is to get rid of black bars in Vimeo resolution)

by Angel Geeze -
Number of replies: 2

Responsive iframe Vimeo video embedding works with html only. When i try to create css classses it stops working properly. Help Please :/

this is pretty much the code. i have a classs "newvid" that wraps the "newvid iframe" css class which works but for some reason not in my moodle 2.5 course.code:

https://jsfiddle.net/7j5oxwr1/

screenshot:

Here is the same code(concept) but hardcoded into the html which does work. I dont understand why it wont work when i put the same code into a css class?

code: https://jsfiddle.net/mcw3vwxm/


All of the css file linking is correct...any help will be greatly appreciated smile</p>

Attachment cY1UjGr.png
Average of ratings: -
In reply to Angel Geeze

Re: Embedded video css only work in html inline. not when i try and create a class. (code is to get rid of black bars in Vimeo resolution)

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Probably some more specific CSS is acting on the iFrame tag when you use an external CSS class. When you declare your styles inline these take priority and so the behaviour is different (and more agreeable in this case).

You could try to apply your CSS styles with more specificity than the competing style or use an "id" to select your container div (and iframe).

Average of ratings: -
In reply to Justin Hunt

Re: Embedded video css only work in html inline. not when i try and create a class. (code is to get rid of black bars in Vimeo resolution)

by Angel Geeze -

Hi justin thank you so much for your reply, i think i will create a new ID just for these cases. This should solve my issue.

Average of ratings: -