3.2 Add iframe-Based Content

Hey, welcome back to up and running with AMP. In the last lesson, we went through and added in a YouTube video to a site using the AMP YouTube element. Now this element is designed to give you the same type of optimizations that you get from the AMP image tag. And there's a bunch of other web site specific tags like the AMP premiere tag, and AMP Hulu tag. But chances are you're gonna find something that you wanna embed into your page doesn't have a tag made specifically for it. And that's when you're gonna wanna use the AMP iFrame element. So in this lesson, we're going to integrate a pin from code pin into the page using the AMP iFrame element. So to help speed things along a little bit, we're just gonna copy the HTML that we added for our video section in the last lesson and paste it in. Delete the existing AMP YouTube tag. Rename the class on our element from video wrap to iFrame wrap. And then just change the heading so it reads iFrame embedding Instead of embed a YouTube video. And then just like we have with our custom elements so far we're gonna need the JavaScript snippet to power the AMP I frame. So we head over to the docs page we'll copy that, go up to a head section and paste it in below the other custom scripts that we've added in so far. So, with that done, we're ready to go ahead and use the AMP iFrame element to get some content into our page. In the way we're going to go about that is we're going to go to the page of the pen that we're looking to embed. And I'll give you a link to this one in the notes below this video, so that you have something to just grab and work with. And then to get the ball rolling we're just going to grab the embed code that it provides us by default which just happens to be I frame code. And we're going to adapt that to working with the AMP iframe element instead. So we hit this embed button down here, go down to get the code. Make sure that the iframe tab is selected here and then copy all of this and just make a space and paste it in here. And we're not actually gonna be using this code specifically, AMP will throw an error in your file validation, if you try to use this. We're just gonna copy and paste some of the stuff that's in this code into our AMP iFrame element. Okay so we'll just start by adding in the element itself amp-iframe. And we'll close it off, so that's already done. Now to start adding attributes. The first one we're going to add in is an src attribute and this works in the exact same way as the src attribute in a regular iFrame. So, we're just going to copy the URL from the iFrame that we brought in and we'll paste it into the SRC attribute of AMP iFrame. In this particular case this URL sets a height for our Iframe. We actually want to be 600 so we're just going to change this value here from 648 or whatever it was when you copied and pasted the code to 600 instead. All right, next up we need to set dimensions, just like we did with the other elements that we've added in so far. So for this one we're going to set width 1100 and height 600. Now remember those are dimensions that are just going to give an aspect ratio to AMP. They're not fixed dimensions they're just to provide the information that AMP needs. We're gonna set frame border to zero just as you would with a regular i frame. And we're gonna set layout to responsive as we have with all of our elements so far. And then the last thing that we're gonna do is add the attribute sandbox. And we're gonna to add four values to this. We're gonna to add allow scripts allow same origin. Allow pop ups and allow pop ups to escape Sandbox. Now you may need one or all of these parameters depending on what it is that you're embedding through your iFrame. So for example, if you're embedding a code pin that runs JavaScript, then you'll need to add in the allow script and allow same origin values or the script in that code pin is not gonna execute. Now, provide a link in the notes below the video so you can read a little bit more detail about that Sandbox attribute, and when you need to use the various values. Okay so now we've got everything that we needed from our original iFrame code. So we can delete it and now let's see what we've got so far. Now you can see here, what we've got is a great big ugly red box. Obviously that's not what we want and this is because in some cases you not going to be able to directly use a code exactly as you might find it provided from a third party. In this case, AMP is blocking the content because it hasn't had H.T.T.P.S. protocol specified leaving that protocol out is fine in other settings, but in this case we're going to need to add it in. So now if we go back and look at what we have now we have our code pin probably working with the AMP preloader animation running before it comes in and everything is fully functional. Okay cool. So that shows you two different ways that you can add media into your pages. Whether it's through an element that's specific to a particular website or whether it's through an iFrame. The next thing that we're going to look at doing with AMP is ways you can make up for the fact that no custom JavaScript is allowed in an app site. Most of us will use JavaScript in just about any website that we create but with an app side. You can't use any whatsoever. So that means that things like your favorite Lightbox script are no longer an option. However AMP does try to make up for that restriction by providing you with some ready made elements that you can use in place of things you would commonly include your own scripts for. And one of those is its own light box element. So in the next lesson we're gonna go through how you can use that light box element to create a gallery of images. With each one opening up in a light box when clicked on, so we'll go through that in the next lesson. I'll see you then.