Hey this is Sasha and thanks for joining me here for another training lesson on HTML. In this video, what I want to do is share with you how to incorporate or embed a video within your HTML.
Hopefully this will give you some more insight in building your business website or working with — editing your business pages as you continue to evolve your business on line. Let’s take a look at the code and show you how it works.
The HTML Code
All right, so the video element is started off with a couple of things. You first start out with video and if you hit the tab, you’ll notice we start with the video, and then we end with the video. Now, most of the time, you’ll be using again .mp4 video formats. That’s just the standard format for video.
Again, you’ll go ahead and type in the source, right here. I’ll go ahead hit tab and you can see it already puts in the SRC code in there. Now I’m going to paste a link right from my hard drive — so this is in my F drive right there. I’m going to remove some additional quotes right there that got added and there you go.
Backstageincome: Learn how to grow a business and evolve your life!
I have the SRC in quotes, right there. I’ll hit save. As I go into refreshing the page, you can see the video is quite huge and large. It is there, but you can’t really see it too much. What I need to do is make some modifications to this.
The better approach to do this is to just go directly into this top video element and do a width attribute. We could say 720. This is the pixels. And by height, we’ll do 480. Here if I go ahead and hit refresh, you can see that video is showing up right there.
Adding Video Controls
Now if I click it, nothing really happens because we don’t have video controls. So again, I need to add controls. So if I go ahead and add the controls right there, hit refresh, you can see now I have video controls on the bottom.
They are a little bit hidden but I’m going to go ahead and shrink this browser window, so that way you could see. There are the controls right there. You can see me talking in one of a previous lesson that we did. And that’s kind of the video.
Backstageincome: Learn how to grow a business and evolve your life!
You could directly link this in there, or link this through an HTTP somewhere on the website if you like. I just did it right from my hard drive, but that’s another way that you could do it.
It’s very similar to the audio controls, but that’s how you ultimately do the video in order to add it to your pages.
Adding Videos To Your Platform
If you’re looking to add a certain video on to, let’s just say, from YouTube, the best way — and to show you a quick example here is if you go to the video right here, and I already have this video pulled up, and I go hit the embed area. Let’s just go back to share.
Normally, you’ll see things like this and that doesn’t usually work for sharing purposes on your own website. That’s great for Facebook, Twitter, because they take that code and reprocess it. But if you’re looking to add it to your website, you’ll take this embed code which you’ll notice is an iFrame and we’ll just go ahead and copy this code. So again, it’s another reason why iFrames are used.
And once you take this iFrame code and you copy it. All you need to do is just go ahead and paste this in. Now this width and height, as you can see is 640 and 360. Frame border is zero. If I hit refresh, you’ll see that the video is right under there.
It gives me the YouTube controls because the SRC is right there. It works directly from YouTube. It gathers all that data and so on. If I want to take a frame border, I could go ahead and do it. If I refresh, you might not be able to see it, but it should technically be there.
Anyways, it’s kind of the way that it works as far as embedding things with YouTube because you do it with an iFrame. You could modify and manipulate these. If I wanted 720 by 480 and I’ll go ahead and hit save.
If we hit refresh you can see it’s a little bit bigger but ultimately you need to play with the code to get it to process correctly. Because I messed with the code, the way that it’s done, it’s not outputting it properly.
Backstageincome: Learn how to grow a business and evolve your life!
Let’s take a quick peek here and see if we can modify this video size. It’s a custom size — so I’ll do 720 by 480 and there it’s going to give me that code. You can see the width actually became 853 by 480 over here. I’ll just copy this, and then what I’ll do is I’ll paste that back in. Hit save and now if I hit refresh, you can see — there we go — that’s the code that I was looking for and that’s ultimately right there, the size or width of that screenshot for that video.
That’s how you incorporate video elements. Again, you could include multiple sources if you are locating them directly on your hard drive, or directly from another website. If you’d like to do that, you can add in multiple sources.
If you’re getting it from YouTube, you could just go ahead and use something like the iFrame right there and make things much easier for yourself.
Thanks for Watching!
All right, so thanks for joining me in this video. I hope you find it helpful.
Don’t forget to hit the subscribe button over here if you want to continue learning more in the future. And if you want to get the premium content, get access to my books, or get more insights on marketing and growing your online business, click the subscribe button. Join one of my live classes, and I hope to see you there.
Go ahead, hit play on another video and continue learning with me.
