Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alex Weinberg
2,726 PointsLayout styling for embedded youtube vidoes.
Hi, wondering if there's a good way to create a layout for embedded youtube videos. I'm wanting to lay them out so there's 2 or 3 columns of videos instead of just one down the page. Here's my code. I've included some styling I found so the videos will be fluid with the page, which I also included.
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8">
<title>Shafty-Portland's Tribute to Phish</title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="normalize" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/hover.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" class="logo">
<img src="img/shaftylogo.00_png_srz">
</a>
<nav>
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="dates.html">Dates</a></li>
<li><a href="media.html" class="selected">Media</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="social-icon">
<a href="https://www.facebook.com/pages/Shafty-Portlands-Tribute-to-Phish/315678355146559"><img class="hvr-push" src="img/facebook-icon.png"></a>
<a href="mailto:gerberragman@yahoo.com"><img class="hvr-push" src="img/mail-icon.png"></a>
<a href="https://www.youtube.com/channel/UCo6v4bTht3T9f8BE-4udrxw"><img class="hvr-push" src="img/youtube-icon.png"></a>
</div>
<div class="content">
<div id="media-video">
<p>Videos</p>
<ul>
<div class="videoWrapper">
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/nTrMLtBwpEI" frameborder="0" allowfullscreen></iframe></li>
</div>
<div class="videoWrapper">
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/RCyE71ySb5c" frameborder="0" allowfullscreen></iframe></li>
</div>
<div class="videoWrapper">
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/aiO-UYzhfuw" frameborder="0" allowfullscreen></iframe></li>
</div>
<div class="videoWrapper">
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/Ab5vJt0OoNA" frameborder="0" allowfullscreen></iframe></li>
</div>
<div class="videoWrapper">
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/tLyrQasFoHo" frameborder="0" allowfullscreen></iframe></li>
</div>
</ul>
</div>
<div id="media-photo">
<p>Photos</p>
<ul>
<li>
<a href="img/shaftyphotogal/shaftyphoto10.jpg">
<img src="img/shaftyphotogal/shaftyphoto10.jpg" alt"Shafty at the Goodfoot">
</a>
</li>
<li>
<a href="img/shaftyphotogal/shaftyphoto11.jpg">
<img src="img/shaftyphotogal/shaftyphoto11.jpg" alt"Shafty at the Goodfoot">
</a>
</li>
<li>
<a href="img/shaftyphotogal/shaftyphoto12.jpg">
<img src="img/shaftyphotogal/shaftyphoto12.jpg" alt"Shafty at the Goodfoot">
</a>
</li>
<li>
<a href="img/shaftyphotogal/shaftyphoto13.jpg">
<img src="img/shaftyphotogal/shaftyphoto13.jpg" alt"Shafty at the Goodfoot">
</a>
</li>
<li>
<a href="img/shaftyphotogal/shaftyphoto14.jpg">
<img src="img/shaftyphotogal/shaftyphoto14.jpg" alt"Shafty at AMF Pro 300 ">
</a>
</li>
</ul>
</div>
<div #id="media-video">
</div>
</div>
<footer>
</footer>
</body>
</html>
CSS...
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; margin-bottom: 5px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
3 Answers
Maor Tzabari
1,762 PointsI would clean your VideoWrapper code and get rid of the ul, li and the width / height of the html and instead just create on div for all of the iframes, please see:
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/nTrMLtBwpEI" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/RCyE71ySb5c" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/aiO-UYzhfuw" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/Ab5vJt0OoNA" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/tLyrQasFoHo" frameborder="0" allowfullscreen></iframe>
</div>
that way it look more organize and easier to understand, so at this point you only have to decide how many videos you want in a row, let's say you want 2, you should set the width to 50%, that means that each video will have the width of 50% of the page, in this case it means 2 unless you have set margin to this iframe. and if you want 3 videos in a row you'll set it to 33%.
so the CSS will look also cleaner and easy to read and understand:
videoWrapper iframe {
float: left;
width: 50%;
}
- Just don't forget, if you want to give it some margin, you'll have to reduce the width size depends on the margin size you set
Alex Weinberg
2,726 PointsSo I tried inputting what you showed and the layout looks pretty weird. Here's a link to the page.. http://port-80-tdxaeg500f.treehouse-app.com/media.html Any way to get them to look neat and in the same vertical plane?
Maor Tzabari
1,762 PointsYour link isn't working