Two Different Video Containers CSS

RapidWeaver Classic
1

Hello all!
My page is here: http://www.jonmessner.com/page3/starthere.html
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%;
}

2

@messyj232

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%; }

2 Likes
3

Oscar-
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="https://www.youtube.com/embed/hG5ZAEh2f-M" frameborder="0" allowfullscreen></iframe></div>

4

@messyj232

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="https://www.youtube.com/embed/hG5ZAEh2f-M" frameborder="0" allowfullscreen></iframe>

Bildschirmfoto 2016-03-02 um 17.02.32.png1664×642 73.8 KB

Bildschirmfoto 2016-03-02 um 17.02.47.png2242×770 560 KB

1 Like
5

Oscar-
THAT IS SO MUCH EASIER THANK YOU!!!
Quick question. There is white space underneath my Libysn player. http://www.jonmessner.com/page3/starthere.html
Any advice on how to remove it? AGAIN THANK YOU!!! :slightly_smiling:

6

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

7

@messyj232

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.

1 Like