Here is my Codepen showing the issue I’m having: http://codepen.io/moy/pen/dhwKq
Basically I place a div round an img or some other media and this styles the element like a stack of photographs (as you can see in the codepen).
This seems to work fine for images. When I used an anchor though the :before styling wouldn’t work unless I set display: block. The problem with this was all the images would have unknown widths, and with no width set, the backgound image width is 100%, so it spans way beyond the width of the image and to the size of the parent container. Setting display: inline-block seemed to resolve this’.
The problem is with _responsive_video embeds.
If I wrap a Vimeo embed in the ‘stack’ div, the video displays correctly. As the site I’m doing is responsive I’ve used FitVids.js to scale videos when the viewport does. The bottom example in my Codepen example shows a video with the applied to it and the video seems to collapse in on itself, which looks like its caused by the display property.
If I give the stack another class, “stack-vid” and set this to display: inherit – The video seems to display fine!
My question is, is there a way to fix this so the CSS I have works with images and videos or an I going to need to use another class when I video is embed. This wouldn’t be ideal but I understand if there is no way round this – but I thought I’d see if any of you cleaver peeps could think of anything! :)
Thanks in advance,
Steve
