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
Daniel Kirwan
1,094 PointsHow do I add a youtube video link into the photo gallery in the how to make a website course?
Hi all. In the course we have been using pictures for a gallery. I would like to replace the pictures with youtube video embed links like this <iframe width="560" height="315" src="https://www.youtube.com/embed/pXxgGZptDgM" frameborder="0" allowfullscreen></iframe> I have used this before in a different website but when I try it with the gallery that we have made the video frame size doesn't change and it over laps the others. I am using the same code that Nick teaches and I'm not sure what I need to change.
Daniel Kirwan
1,094 Pointsyer i tried changing the line with the img src we are using with the <iframe> line but it throws in the bullet points again. I'll try the link you put in. Thanks for the help.
4 Answers
Joseph Fraley
Treehouse Guest TeacherYou should share your code with us so that we can help you debug the problem! It's hard to guess what issue you're having without access to your source. You can add code using three "ticks" before and after your code block. The first set of ticks should be followed by the code syntax type. For example:
```html
[some code]
```
function() {
var message = "like this";
console.log( message ); //=> "like this"
}
Daniel Kirwan
1,094 PointsThis is the coding for the videos I'm using '''<div id="wrapper"> ''' <div id="wrapper"> <section> <ul id="videogallery"> <li> <iframe width="560" height="315" src="https://www.youtube.com/embed/-gj__1wVUIg?rel=0" frameborder="0" allowfullscreen></iframe> <p>Destiny review and videos</p> </a> </li> <li> <iframe width="auto" height="auto" src="https://www.youtube.com/embed/fxeW9FnZv1Q" ></iframe> <p>Bloodbourne review and videos</p> </a> </li> <li> <iframe width="auto" height="auto" src="https://www.youtube.com/embed/fxeW9FnZv1Q" ></iframe> <p>Fallout 4 preview and videos</p> </a> </li> <li> <iframe width="auto" height="auto" src="https://www.youtube.com/embed/fxeW9FnZv1Q" ></iframe> <p>Metal Gear Solid V: The Phantom Pain review and videos</p> </a> </li> <li> <iframe width="auto" height="auto"src="https://www.youtube.com/embed/fxeW9FnZv1Q" ></iframe> <p>The last of us review and videos</p> </a> </li> </ul> <section> ''' This is the code for the photo library that is in the course ''' <section> <ul id="gallery"> <li> <a href="img/Destiny.png"> <img src="img/Destiny.png" alt=""> <p>Destiny review and videos</p> </a> </li> <li> <a href="img/Bloodborne.jpeg"> <img src="img/Bloodborne.jpg" alt=""> <p>Bloodbourne review and videos</p> </a> </li> <li> <a href="img/F4.png"> <img src="img/F4.png" alt=""> <p>Fallout 4 preview and videos</p> </a> </li> <li> <a href="img/MGSV.jpg"> <img src="img/MGSV.jpg" alt=""> <p>Metal Gear Solid V: The Phantom Pain review and videos</p> </a> </li> <li> <a href="img/TheLastofUs.jpg"> <img src="img/TheLastofUs.jpg" alt=""> <p>The last of us review and videos</p> </a> </li> </ul> </section> And this is the css for the list ''' /************* Page portfolio *************/
gallery{
margin:0;
padding:0;
list-style: none;
}
gallery li{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
gallery li a p{
margin: 0;
padding: 5%;
font-size: 0.75em;
color: black;
} '''
Rudy Tan
Courses Plus Student 16,635 PointsOk, I saw that you have a closing anchor tag but you don't have any opening anchor tag in your HTML. Second you change the id name from #gallery to #videogallery so change that too in your CSS.
Rudy Tan
Courses Plus Student 16,635 PointsIf you are having bullet points, maybe you should use list-style: none; on your <ul>
Rudy Tan
Courses Plus Student 16,635 PointsRudy Tan
Courses Plus Student 16,635 PointsDid you use iframe for the youtube video? Normally it would goes like this:
<iframe width="500" height="280" src="link to the video" frameborder="0" allowfullscreen></iframe>There is also a course here in Treehouse about HTML video: http://teamtreehouse.com/library/html-video-and-audio You should check that out
Hope that helps.