How to Insert a YouTube Video into Your Website with Microsoft Expression Web

Embed a YouTube Video in a Web Page


How to Insert a YouTube Video into Your Website with Microsoft Expression Web

by Christopher Heng, thesitewizard.com

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.

Prerequisites

This guide assumes the following things.

  1. 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.

  2. 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.

  3. 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.

How to Embed a YouTube Video in Your Web Page

  1. Go to the YouTube video that you want to embed, and let it play.

  2. While it is playing, click your right mouse button on the video window. A menu should appear.

  3. Click the menu item that says "Copy embed code".

  4. Start up Expression Web and open the web page into which you want to put the video.

  5. 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.

  6. 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.

  7. 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.

  8. If your cursor was previously in an empty paragraph, it should now be in the middle of text that says "<p>&nbsp;</p>" (probably after "<p>" and before "&nbsp;</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.

  9. Click "Edit | Paste" from the menu. This inserts the "embed code" that you copied earlier.

  10. Click the "Design" tab at the bottom of the window to return to the Design view.

  11. 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.

  12. 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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Insert a YouTube Video into Your Website with Microsoft Expression Web





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.