Figure out how big you want the video to be

This is similar to the process of using images. Plan first, then add. On the web, most of the time you will know how wide you want the video to be so make sure to figure that out.

Quick Tip
You just need to know the width. When you type it in later on YouTube it will set the height automatically for you.

More on Custom Sizes
You must choose a width and height that maintains the video's aspect ratio (usually 16:9 or 4:3). Here is a quick way to find the height if you know the width:
For 16:9 multiply the width by 0.5625 to get the height. Round UP to the nearest whole number

  • For 4:3 multiply the width by .75 to get the height. Round UP to the nearest whole number

Create a div for where you will put the embed code from YouTube

Nothing complicated here. Just add a div and give it a class or ID, or both.

It can be helpful to use the same class on every div around a video so you can style them all easily. Then you can also add unique id attributes to each video

<div id="css_fundamentals" class="video">
<!-- YouTube embed goeshere -->
</div>

Create a div for where you will put the embed code from YouTube

Go to the video on YoutTube

Go to the video on YoutTube

Click the Share Link

Click the Share Link

Click the Embed link

Click the Embed link

Set your Custom Size

In the first step you figured out a width you wanted. Enter that number in the first box (1). YouTube will automatically add the height.

Set your Custom Size

For more on the Embed Options

Visit tis page https://support.google.com/youtube/answer/171780 for more on the different options. However, most of the time the only thing you might want to do is check the "Enable privacy-enhanced mode" which stops YouTube from collecting data on your viewers unless they actually play the video.

Copy the Embed Code

In the first step you figured out a width you wanted. Enter that number in the first box (1). YouTube will automatically add the height.

Copy the Embed Code

Paste the Code into your HTML page

Paste in the code.

SRC Attribute in YouTube Embeds
You're almost done, but you will find that if you open the web page now, the video won't play.

This is because the new embed code removes the http: part of the UR (1). YouTube did this to allow the video to be easily embedded in both normal http pages and pages served over https. The problem is that this only works if your file is actually on the server.

If you FTP your file up to your account on the MMP server then you will see that it works. To see it locally, follow the next step

<div id="css_fundamentals" class="video">

<iframe width="540" height="304" src="//www.youtube.com/embed/zDsPWN6jRKo?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

Add http: to view video on local files

One fix is to simply add the http: in front of the //

Your video should now play if you're viewing the page stored on your computer or USB drive.sssssss