SharePoint YouTube Video Embedding Procedure Outline
1. Navigate to the site that you wish to insert the YouTube video and sign in using the “Sign In” link
on the upper right-hand corner of the page.
• If using IE and a campus computer, you may be signed in automatically via single sign
on.
2. Click “Edit Page” at the top left-hand corner of the page either by clicking the paper and pencil
icon, or by going to “Site Actions” and then “Edit Page”.
3. Click the area of the webpage where you would like to insert the YouTube video, and then go to
the top of the page to the “Editing Tools” ribbon, and click “Insert”.
2.
1.
4. The icons on the ribbon should now be icons that are related to inserting items. Click the “Web
Part” icon to insert the placeholder for the YouTube video.
5. A drop-down list of types of web parts should appear. In the left column labeled “Categories”,
click the “Media and Content” folder. In the middle column labeled “Web Parts”, click the “Page
Viewer” icon. Lastly, click the “Add” button at the bottom of the right column.
2.
1.
3.
6. Your page should now look like this picture below. Click “open the tool pane” link in the text in
your page content. Click the “OK” button to save your changes to the webpage.
1.
2.
7. The Page Viewer tool pane should now be open. If you already have the link to the YouTube
embedding information, then insert it into the text box under “Link”. If not, proceed to steps 8
and 9.
8. In a web browser, go to www.youtube.com . Find the video that you wish to insert into your
web page and click on it.
1.
2.
9. Click on the “Share” button underneath the video, and then click the “Embed” button that will
appear. Lastly, highlight and copy the link below the “Embed” button. The important
information to copy is in between the two quotation marks. For example, in this code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/Ma99IybNFv8"
frameborder="0" allowfullscreen></iframe>
You would want to delete all of the other copied info aside from
http://wwww.youtube.com/embed/Ma99IybNFv8
1.
2.
3.
10. Paste the YouTube embedded link either by pasting directly into the one-line text box in the
Page Viewer tool pane at the right, or click the ellipsis to expand the text box, making it easier to
read and type. After pasting in the link (E.g. http://wwww.youtube.com/embed/Ma99IybNFv8),
type in this information after it:
?wmode=transparent
So that the example link would look like this:
http://wwww.youtube.com/embed/Ma99IybNFv8?wmode=transparent
If ?wmode=transparent is left out, the video will have problems with overlapping other objects
on the webpage. Then, click the “OK” button in the text editor.
2.
3.
1. here
4.
OR
here
11. Click the “Appearance” title to expand the drop down list, and edit the Height and Width to be
adjusted to your liking. Make sure that the button to the left of “Yes” is checked in both the
Height and Width sections, or your specified height and width may not be applied. At the
bottom right, change the “Chrome Type” to None so that the title (in this case, “Page Viewer”)
will not be displayed. Click the “OK” button to finalize your changes.
1.
2.
3.
4.
12. Click “Save & Close” by selecting either floppy disk icon.
13. Congratulations! Your YouTube video should now be displayed on your page.