Embedding Youtube Videos Side by Side in a Row | HTML Section | Boundless Theme

Emira2021
Visitor
1 0 0

Hi everyone,

I hope you are all doing well!

I have been building a site for a client and ran into some trouble with coding an HTML section to feature three youtube videos side by side in a row.  For more information, I am using the Boundless theme. I found this code online and hoping to tweak it to be more aesthetically pleasing on the site. I want to have the videos appear right below the blog posts. However, the videos overlap below the footer due to changing the <div.full-width> position from relative to absolute. If I use relative the videos just appear squashed. I have that set right now on the site. I will provide a photo of the difference between changing from absolute and relative/static in the tag div. full-width(highlighted below in the code). I love the full player look when it's set to absolute but it places the videos below the footer. 

 Preview URL 

//* This is the code 

<style>
div.full-width {position:relative;width:100%;left: 0px;top:100px;float:center;}
@media screen
and (min-width: 1051px), screen and (min-device-width:851) {
div.video {position:static;float:left;padding:5px;width:30%;}
iframe {width:100%;}
}
}
</style>
<div class="full-width">
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/E2HM2eCeShU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/-EfriB4sNgk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div class="video"><iframe width="1560" height="315" src="https://www.youtube.com/embed/ES4b2a7p3kM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
</div>

 

//

Screenshots Below

Relative 

relative.png

 

 

 

 

 

 

Absolute 

absolute.png

I have tried changing the width of the iframes and the 'div. full-width tag' but it loses its structure. I am at a bit of a loss with how to proceed. If anyone can help me out that would be much appreciated!

 

Thanks,

 

Emira2021

 

Replies 0 (0)