Two Different Video Containers CSS

(Jon) #1

Hello all!
My page is here:
I am using CSS to make the youtube videos responsive.
However, the new Libsyn player is video based and when I use the same wrapping on the player, it looks disfigured.
My question is this, can I use two separate video wrapping codes in CSS on the same page?
The code I am using for Youtube is this:
.video-container {
position: relative;
padding-bottom: 55.25%;
padding-top: 30px; height: 0; overflow: hidden;

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Problems with video size and plugin
(Oscar Schmid) #2


This should work, you do not address the same place,

.video-container {
.video-container iframe,
.video-container object,
.video-container embed {

but, … with this simple code below in CSS, your youtube videos in iframes are responsive.
Use the official iframe code from the youtube video.

img, iframe { max-width: 100%; }

(Jon) #3

Thank you.
I am confused. Should I replace the code I am using for Youtube with?
I am a newbie at this stuff. I appreciate the patience!

One of my youtube codes looks like this
<div class="video-container"><iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe></div>

(Oscar Schmid) #4


You can use div’s, but with my CSS code it’s not necessary, you can use the official youtube code and it works.

Try this with the little CSS code :wink:

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

(Jon) #5

Quick question. There is white space underneath my Libysn player.
Any advice on how to remove it? AGAIN THANK YOU!!! :slightly_smiling:

(Jon) #6

I figured it out. Again thank you so much!!! :slight_smile: :slight_smile: :slight_smile:

(Oscar Schmid) #7


my pleasure, when it works :wink:

With the code from youtube and my CSS, you don’t need a player.
You can put the code in every pages, plugins or stacks.