Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Styling the Video

In this lesson, I’ll show you how to add CSS to style the embedded video in your site’s front end. We’ll also look at how to make the video work with a responsive layout.

Related Links

2.3 Styling the Video

Hello and welcome back to this Tuts+ course on WooCommerce. In the previous course, we added video to one of our products. We used a plug-in to create a video tab, and here you can see the video we embedded from YouTube. In this part of the course, we're going to add some styling for that video. We'll give it a bit more space and we'll also make it responsive. So let's get started at having a look at the code that's generated by that video. If I right-click, I can click on Inspect Element. Now I'm using Safari, but other browsers, such as Chrome and Firefox, give you a similar functionality so that you can inspect the HTML that's being output. So here what we've got is a woocommerce-Tabs div. And inside that is the code for each of the panels. Now this is the one for video. And here is the iframe that we inserted into the post in the previous part. Now what I want to do is add a margin at the top and bottom of that I-frame so that it's got a bit more space. So let's do that. So here, I'm going to open up my theme encoder and I'll go into the section on content. Let's add a comment so we know what we're coding here. And then I'm going to add some styling for that. Now let's just go back and check the classes and IDs that we've got to work with. So here's the panel, which has got an ID of tab HTML5 video. So I'm going to copy that from here. So I'll paste that into my stylesheet as an ID and then I add iFrame after it because it's the iFrame element that I want to style and I'm going to add a margin. Now I'll save that. And after refreshing my screen, you can see that there's some margin above this. Now down here, there's a credit link and that's been added by the plug-in. Now, I could identify the code in the plug-in and see if I can override that. But what I'm gonna do here is just simply hide this using CSS. So let's inspect that element again. So that's a paragraph inside this div with the tab_html5_video id. So let's use that again. I'll copy this and replace the iFrame with a p. I'm gonna use display, none, to hide that. I'll save my file and then refresh. Look at my page, take a look at that video and you can see it's gone. So that just makes my site look a little bit more professional, because there isn't a link to an external source. Now bear in mind that that link hasn't actually gone, it's still there in the markup, but it's not being output because of the CSS. So if somebody's using a screen reader, or they've disabled styles, they'll still see it. If you want it to be thorough, you could delve into the plugin code and identify whether there's a function or a hook or a filter that you can tap into to get rid of that. But this is a quick and easy way to hide it from most people. Now what I'm going to do is make that video responsive. At the moment, it doesn't fit the whole width of its containing element. And if I resize my screen, the layout breaks. You can see that it's now wider than its containing element because it's got a fixed size which is part of the iFrame code. Now, there is a technique you can use to override this, and that's being written about in this article for A List Apart by Thierry Koblentz. This gives you some CSS that you can use to make your video responsive. I've also written about it for Smashing Magazine. Here you can see how to use it for video and also for calendars such as Google Calendar that you've embedded in your site. So let's do it. Now, the first thing you'll need to do is add a containing element around your iFrame. So let's edit the product. And this containing element will go in that embed code that we added to the video. So, we'll edit this. And you can see, here's your embed code. So I'm gonna add a div with a class. I'm closing that div as well. And what I've got now is a div with the video container class that is surrounding my iframe. I click on the Edit button to save it and then I'll update my product by clicking on Update. So now I'll take a look at my product, scroll down to the video, and see the output HTML. And here you can see this video container div that surrounds the iframe. So I've now got that to work with. So I go back into my style sheet and I'm gonna use that class for the div that I just added. So I can now add styling for that video container div. So firstly I'll give it relative positioning. Then I use padding bottom and I give it a percentage here. Padding top. Now the reason I am using a percentage for the padding on the bottom is because of the aspect ratio of the video. And if your video has a different aspect ratio, you might need to tweak this to get it to fit properly on the screen. And then for padding top, I use 35 pixels. And that's because that is the space that is taken up by the border at the bottom of the video that's displayed by YouTube. Next I had a height value of 0, and an overflow of hidden. The next thing I need to do is add some styling for the iframe. So let's copy this video container class, and then add iframe. So, this will apply to the iframe that's inside that video container div. So, here I'll use position absolute. Top will be positioned at 0 inside its containing element. Left will also be 0, and it will have a width and a height of 100% each. And what that does is it means that this containing element with the video container class is responsive and the iframe inside it will have 100% of the width and height of that and because it's absolute positioning it will ignore the width and height that is set within the actual iframe. So, let's save that and take a look at how it looks on the page. So, I'll refresh my screen, scroll down, and have a look at the video again. And what you can see is it now fills its containing element completely. And if I resize my browser window, you'll see that it still takes up the full width in its containing element. So if somebody's looking at my site on a mobile device, it won't break the layout. And it'll all fit and work perfectly. So that's how we add styling to make that video responsive. And here it is back in full screen. Now let's just go back into the CSS to tidy things up a little bit. Up here, we've got this iframe that's having a margin of 10 pixels and 0. I'm gonna move this and put it in the declaration block that applies to the iframe down here. So I can get rid of that completely. And it means I've got a little bit less styling to worry about. Let's just save that and check that it all works okay, refresh my screen, scroll down to the video, and that's all working fine. And my margins are still there, so that's how we add some styling to our video to give it a bit more breathing room and also make it responsive. In the next part of this course, we'll move on to mega menus and I'll show you some mega menus in real life. Also we'll look at how we'll use the mega menu in our store. See you next time, and thanks for watching!

Back to the top