3.1 Add a YouTube Video

Hey, welcome back to up and running with AMP. In this lesson we're gonna start adding in extra pieces of content into the website they were created so far. And we're gonna start by putting in a section with the YouTube video. So in the same way the AMP doesn't let you just use a regular image tag, it also doesn't let you just use regular ways to embed videos, and IFrames and all different kinds of other stuff. And this is for the same reasons that it has you use a different custom element instead of an image element. It provides you with a pretty long list of alternative custom elements that you can use for things like imbedding YouTube videos. There's also an element for embedding Vimeo videos, and things from Hulu, all kinds of different stuff. And these elements give you the same type of optimizations on your videos and other types of content as you get on your images with the AMP image element. So you're gonna get placeholders to prevent reflow, you're gonna get automatically calculated loading prioritization and all the other bits and pieces that AMP does for you in the background. All right so let's go ahead and take a look at how you use the AMP YouTube element first that would seem to add a couple of divs into a layout to hold these things. So we're gonna make one with the class video_wrap, and then inside that we're gonna make another one with a classes standard_width and standard_padding, so that this is just purely for layout. And then to help us keep track of each one of the sections that we're about to create what we're doing in each of them. We'll just add an H2 element with the heading embed a YouTube video. All right, so the AMP YouTube element is another one of these optional elements for which the JavaScript does not come default. So you'll need to go to the docs page for the AMP YouTube element, there's a link to that below this video and grab the snippet that's gonna pull in the JavaScript that you'll need. And then we'll head up to our head section, and we'll just paste this in below the extra script tag that we added in the last lesson. So now we're ready to actually add in our video tag. So we'll just add in the element amp-youtube, and then we'll close it as you have to do with all AMP elements. Now, to actually place a video into this element, you need to add the attribute data-videoid. And this is where you gonna specify the video that you wanna have show up here. Now, the way that you find the video ID as you go to the video in your browser and then in the URL you'll see v=, and then you'll see a string of letters and numbers. So go ahead and copy one of these ids from any video that you like and then paste it into your data video ID attribute. Now, we want this video to behave responsibly. We wanted to be able to expand and contract to fit the size of viewport that we're working with. So just like we did with our image we're gonna add in layout = responsive. And then that's going to take care of that resizing for us automatically. And again, also like with images if you want to facilitate the responsiveness, you need to provide an initial width and height so that AMP can take that aspect ratio from that width and height and apply it consistently while it's resizing. So in this case we're going to set the width to 600 at the height to 270. So let's say that and have a look at what we've got. Okay, cool, so there's our video showing up just like that. So in some ways it's actually easier to use this AMP YouTube element than it is to use regular embed code. Especially given that you don't have to worry about including any type of script that is going to keep your aspect ratio correct as part of responsive resizing of videos. Now, you probably noticed something looks a little bit off here and that is that our heading is cramped up against the top of the section that we just created. And this is a layout issue, so it's not directly related to our YouTube video. But we're gonna deal with this now nonetheless. If you remember when we added in the divs that we have wrapping our YouTube video, we use the class standard_padding. Now there isn't actually any CSS in our document yet for that class. And the reason I wanted to show you this separately, is that you need to take an approach with AMP friendly CSS that's different to a fairly common practice. And that is that when you want to set box sizing to border-box, you need to do on a case-by-case basis. More commonly you'll see in CSS the star selector used and then box sizing border-box applied to everything in the whole side. But that's not something that's permissible in AMP. Basically, because they don't want you to be applying a rule to every single element when there may only be a couple of elements that really need to have that rule directly applied to them. Now, we want our standard_padding class to have its box sizing set to border box. So we're gonna go into our CSS and we're gonna set that up and then we're gonna go ahead and add in padding of 6 rem on the vertical and 3 rem on the horizontal. So now, if we go back and have a look at our site again, the spacing is all nice. So that's just an example of how you can control your layout, was making sure that you're sticking with the AMP rules. So that's an example of how you use one of AMP custom elements to integrate media into your page. And in the next lesson we're gonna go through another one as I mentioned there are specific elements for things like YouTube and Vimeo and Hulu and so forth but sometimes you're gonna find In something that doesn't have an element specifically created for it. And then you're probably gonna wanna use an IFrame. So in the next lesson we're gonna go through how to integrate IFrames into your content in an AMP friendly way. So I'll see in the next lesson.