Join Jen Kramer for an in-depth discussion in this video Including flexible video, part of Learning Foundation 4.
The two most popular video sites out there right now are YouTube and Vimeo. It's very common for a client to want to incorporate video into their site, from one or both of these sources. You probably already know how to embed a video on a page. But can you style it with foundation to make sure that video is responsive? Fortunately, that's really really easy to do with foundation. I have a video here for Roux Academy. And this is the video that's displaying here inside of Vimeo, and here is the exact same video here displaying inside of YouTube.
So what I'm going to do is, I'm going to go ahead and incorporate these into my web page. Right now I have open 3-video.html. If you've been following along with me in this chapter, you can continue working in your exact same document. If you're jumping in right here, you can find 3-video.html inside of your exercise files folder, the links to these particular videos are available. It's also a file inside of your Exercise Files folder, which contains these two URLs so that you can go and get the videos there. So, let's try the YouTube video first.
I'm going to put this in just after about the event but before the schedule. So, right in this area, I'm going to want to drop in that YouTube video code. Inside of my browser, inside of YouTube, if I go to the Share link down here at the bottom, this will give me a link. Where I can email this link to somebody and they can click on it and watch inside of the YouTube interface. But what I really want to do is embed this. So, I'm going to click on the Embed link, and there we have the code that I need. In order for this to show inside of my web page at, in this case, 560x315, I can change that size to other sizes if I want.
There's all kinds of other options here. I'm just going to take this as the default, and I'm going to Ctrl or Cmd+C to copy that little bit of code. And then, I'm going to paste that on in here, in sublime text. So, that's just going to put the video inside the web page. In order for this to work with Foundation and make sure that it's in a responsive kind of framework, then I'm going to need to wrap this in a DIV tag. This is going to be a DIV with a class of flex-video.
And here is my video right here. And then I'm going to close my DIV. If I just go ahead and save this page now and I take a look at this in my web browser. She's scrolling down here, and there's my YouTube video, and you can see this is responsive as I make the page smaller. You can see that the video is going to re-size there inside of my grid until I hit the 768 pixel break point. Because I'm using the large, this is going to then stretch all the way across the page. Had I used the small grid, it would continue to re-size within that small grid area, whatever size it was.
And, now as I make the page smaller, that video is going to continue to re-size. So, that's YouTube. What about Vimeo, which is also a very popular option? Here within Vimeo, I'm going to need to go to my Share Link here. And this is going to give me my embed code, right underneath of that. And I'm going to copy that embed code, Ctrl or Cmd+C to copy it. Then inside of sublime text, I'm going to Ctrl or Cmd+V to paste that on in place. As I did with the YouTube video, I'm going to want to wrap this in a DIV class of flex video, with a slash DIV down here.
And I'm probably want to indent this i-frame here a little bit. Make that a little bit easier to read. The other thing that I'm going to need to add to this particular DIV, with a class of flex-video, is actually a class of Vimeo. And Foundation has added this because of the way that Vimeo is displaying their videos and where their control buttons are located, and so forth. That they had to make a few additional tweaks for a Vimeo video to work inside of the web page. So, if you'll go ahead and save that, you can go ahead and take a look at that inside of your web browser.
And you'll now see that you have two videos, one on top of the other, there we go, there's the Vimeo version. And as we collapse the page here with Vimeo, you can see that it resizes until we hit that break point. Then, it's going to stretch all the way across the screen again. And then, of course, continue to re-size smaller and smaller after that, as the screen gets progressively smaller. So, it's really quite simple to embed videos inside of a Foundation-based web page. All you need to do is remember to wrap the div with a class of flex video, plus or minus that Vimeo class if you need to. And that is going to make you have responsive video inside of your webpage.
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation