Welcome back. As promised, it's now time to embed our video. This video is slightly longer than the others we've made because we'll also be looking at the impact of the CSS code that you added in the last video on how your video displays lots of videos. So first of all, to get going, jump into Wistia and find the video that you want to embed. I'm assuming it's a video that's in landscape like that, otherwise known as sixteen point nine, which is the size ratio or colloquially widescreen. We're back with our old friend from video one in this series to help us along. First, I wanna point out that the share function up the top here is not for embedding your videos. It provides a link, which if you have a pro or an annual account with me, you can use for social media or to link people back to your videos stored in Wistia, which isn't really a good idea, but you can. We're looking for the embed function, which is over here. There are several types of embed and this is inline, the one we want, and it's a standard embed and the one that has the SEO benefits for you. Going through the steps, number one, set it to responsive default. I'll show you how that works later. You want the standard embed. And note, you absolutely want to select inject SEO metadata and it's useful to look at the preview to remind yourself of what you've written, check your typos and any other steps that you may or may not have completed yet. I recommend you always go through these steps to ensure that the text box is checked. It's a really easy thing to miss. Of course, if your video has no transcript, so for example, it's just music or maybe a bird song, something like that, you may not think you need to check the SEO box, but I presume it has a function on the page, the video is playing for a reason, so you should at least ensure that you have a relevant title and description, as we've already covered in this series. As a side point, while we're here, this here is the address of the thumbnail that you're using and this is the address of the video. Now, it's useful to note that the link says iframe, but it's a master address that Wistia gives to search engines and not one that affects you, so you don't need to worry about it. So now what you do is copy the code. We'll go back over to the website now. We'll return to my sample example page and to begin with, we add a container. We then add an HTML block and then we add our code. So let's examine how the video looks on a page. It's quite important that I highlight that the CSS that we've added in the last video does not automatically work unless you add it to the container that your video embed code is sitting inside. That's why we add a container, then an HTML block, and then of course the code. As there is no CSS active, you'll see that the video completely is in line with the text. This means it's filling the container in which all of your page content has been previously placed. So there are no restrictions on it. There are definite ramifications for this in a mobile viewing, but on a desktop, our CSS will at least reduce the size of the video so it does not dominate the page. You're working with a responsive embed. It fills all the available space. And what we're doing is controlling that space. It's also important to point out that your video will still work if you don't add any of this, you just have less control. Here's what you need to do next. First, click on the container and then the CSS class box at the top of the page. Assuming your video is widescreen, add video wrapper, and assuming you want it centered, add video center, exactly as you can see written. If your video is in portrait mode, you would have added video portrait instead of video wrapper. So if you're ready, you can go ahead and build a page and I'll now show you what it will look like on various devices. As you can see on the mobile in Portrait mode, the video is sitting there and in line with the text, which is now perfect. In landscape mode, the video displays set slightly inside the text. That's just a design choice that I've made. In both cases, the CSS is preventing the video from automatically filling the screen when it's played. If the video was filling the full screen, when it was played, the native player on the device would take over and you'd lose a lot of your functionality, including the fancy annotations, which you could have over my shoulder. There is one final and important distinction to make. If your website is using Stripe, so has content inside a container that is less than one hundred percent, so let's say you've set it at eighty five or something, then once you put the video inside that container and reduce its display even more with our CSS, it can look quite small and be a poor user experience, especially in a mobile device. Where possible, I recommend you ensure that you don't put your video container inside another one. The video will still play, it'll just display small. And with that, this is the end of this video. If you'd like to study up on other types of embeds, then please jump over to the Wistia page that's showing up right now in the top corner. See magic. In the next video, we're going to look at some of the basic Wistia settings to help your video look the best on your site. See you soon.
