As you surfed the Internet, you would have undoubtedly come across websites that had YouTube videos embedded (such as this page). That is, you could watch the video directly on that page, without needing to go to YouTube. This article shows how you can insert a YouTube video into a page on your site using the free Microsoft Expression Web editor.
This guide assumes the following things.
You already have a website into which you can insert a YouTube video. Those who don't should begin with How to Build / Create a Website.
You already have Microsoft Expression Web, and more or less know how to use it to design web pages and upload them to the Internet. The Expression Web Tutorial is the place to look at for those who don't.
You have a YouTube video to insert into your site. Note that this article only deals with the technical aspects of embedding. It doesn't address the potentially problematic issue of whether it's okay to insert other people's video, should the video in question not be your own 100% original production.
Go to the YouTube video that you want to embed, and let it play.
While it is playing, click your right mouse button on the video window. A menu should appear.
Click the menu item that says "Copy embed code".
Start up Expression Web and open the web page into which you want to put the video.
I will assume that you are currently using the Design tab of Expression Web. Click to put your text cursor at the spot on the page where the video should go.
Click the "Code" tab near the bottom of Expression Web's window to switch to the Code view. You should now see the underlying HTML code.
Look for your text cursor. Don't click the page itself (or you will accidentally move the cursor). If you need to move up and down the page, click the scroll bars on the right side and bottom to move it.
If your cursor was previously in an empty paragraph, it should now be in the middle of text that says
"<p> </p>" (probably after "<p>" and
before " </p>").
If so, use your arrow keys and move the cursor to the end of the line, that is, immediately
after "</p>". Otherwise, go to the next step.
Click "Edit | Paste" from the menu. This inserts the "embed code" that you copied earlier.
Click the "Design" tab at the bottom of the window to return to the Design view.
Expression Web will say something like "Getting https://www.youtube.com/embed/[some string of characters here] from server". Eventually, there will be a black box on the screen where the video should be. As far as I can tell, the video itself does not play in Expression Web (at least not on my system), but it should in a real web browser when the page is uploaded (published) to your site.
If your screen is narrow, the black video box may exceed the width of the displayed page. This is because the embed code specifies a fixed video width of 854 pixels (or it did at the time this was written). Since Expression Web has panels using up some space on the left and right sides of the window, the width remaining for the actual page is less than that in a normal web browser.
The fixed width also means that the page embedding the video will probably not be mobile-friendly. This is the case even if you have used my Expression Web tutorial series to design your site. Although that tutorial series guides you to create mobile-friendly pages, the YouTube embed code, with its large fixed width, will exceed the screen sizes of some mobile devices.
Save the page and publish it. Then test it using a web browser.
Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert a YouTube Video into Your Website with Microsoft Expression Web
