# Two Different Video Containers CSS

**URL:** <https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642>\
**Category:** RapidWeaver Classic\
**Created:** [March 2, 2016, 2:15pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642 "2016-03-02T14:15:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![messyj232](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/messyj232/32/28368_2.png) [@messyj232](https://forums.realmacsoftware.com/u/messyj232)\
**Post date:** [March 2, 2016, 2:15pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/1 "2016-03-02T14:15:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)\
**Post date:** [March 2, 2016, 2:50pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/2 "2016-03-02T14:50:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![messyj232](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/messyj232/32/28368_2.png) [@messyj232](https://forums.realmacsoftware.com/u/messyj232)\
**Post date:** [March 2, 2016, 3:13pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/3 "2016-03-02T15:13:22Z")

</div>

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>`

---

<div class="post-metadata">

**Author:** ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)\
**Post date:** [March 2, 2016, 4:05pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/4 "2016-03-02T16:05:30Z")

</div>

@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 😉

`<iframe width="560" height="315" src="https://www.youtube.com/embed/hG5ZAEh2f-M" frameborder="0" allowfullscreen></iframe>`

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/c/c904ca1cce94a5524b1242875160b9d4086eca58.png)

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/d/dda8350e8b9b28c817b9297f765bd8f3093fd6f5.png)

---

<div class="post-metadata">

**Author:** ![messyj232](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/messyj232/32/28368_2.png) [@messyj232](https://forums.realmacsoftware.com/u/messyj232)\
**Post date:** [March 2, 2016, 5:52pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/5 "2016-03-02T17:52:24Z")

</div>

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](http://www.jonmessner.com/page3/starthere.html)  
Any advice on how to remove it? AGAIN THANK YOU!!! 🙂

---

<div class="post-metadata">

**Author:** ![messyj232](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/messyj232/32/28368_2.png) [@messyj232](https://forums.realmacsoftware.com/u/messyj232)\
**Post date:** [March 2, 2016, 5:56pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/6 "2016-03-02T17:56:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)\
**Post date:** [March 2, 2016, 6:14pm UTC](https://forums.realmacsoftware.com/t/two-different-video-containers-css/5642/7 "2016-03-02T18:14:58Z")

</div>

@messyj232

my pleasure, when it works 😉

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.