SchoolFront Support

 

Embed a YouTube Video

Embed a YouTube Video on Your Webpage

These instructions explain how to embed a YouTube video on a webpage in your CMS website using the HTML web-part or in a Blog post. You can embed multiple videos in a single HTML web-part or Blog post by pasting embed codes from YouTube into the WYSIWYG editor. 

Warning: YouTube is a service of Google. Google makes periodic changes to the functionality and capabilities in their YouTube tools so this help content may not be 100% accurate if they've made changes since this content was written. 

Upload the Video to YouTube

First you will need to upload the video to YouTube and apply the appropriate security setting.

1. Sign into your YouTube Account.

2. Click on your account name located in the top right of any page.

3. Click on Video Manager from the expanded menu.

4. Choose the video you want to edit and click the Edit button below the video thumbnail.

5. Scroll down to the Basic Info tab and find the Privacy section.

6. You'll see the option to make the video Public, Unlisted, or Private.

7. Select Unlisted or Public (videos set to "Private" will not embed on your page).

8. Click the Save Changes button at the bottom of the page.

Capture YouTube Video Embedding Code

1. Sign into your YouTube Account.

2. Click on your account name located in the top right of any page.

3. Click on Video Manager from the expanded menu.

4. Click the Edit button next to the video thumbnail.

5. Click the Advanced Settings tab.

6. Ensure that the Enable Embedding checkbox is checked.

7. Click the Save Changes button.

8. Click the View Video Page button in the upper-right corner of the screen.

9. Click the Share button under the video.

10. Click the Embed button.

11. Uncheck the checkbox by Show Suggested Videos When the Video Finishes.

12. Check the checkbox by Use HTTPS.

13. Check the checkbox by Enable privacy-enhanced mode.

14. Uncheck the checkbox next to Use old embed code.

15. Because the video list comprises a specific space with a specific width, the embedded video will be cropped unattractively if you do not specify an appropriate width. Therefore, under Custom, enter “430.” The height will fill in automatically in proportion with the width.

16. Copy the embed code from the window on the page. You will be pasting this into the WYSIWYG "source" on your page. It will look something like this:

<iframe width="430" height="242"
src="https://www.youtube-
nocookie.com/embed/2z256c5456lEDXs" frameborder="0"
​allowfullscreen></iframe>

Post the Video to Your Page

We are using the WYSIWYG editor in the CMS blog web-part to post embedded YouTube videos.

1. Login to the CMS as an administrator.

2. Navigate to the page in your CMS website where you want to embed the video.

3. Add an HTML web-part to the page.

4. Click the edit link. 

5. Click Source.

6. Paste the embed code from YouTube into the WYSIWYG editor.

7. Click Source again. You will see a red box.

8. If you want, you can type a description of the video below the red box in the WYSIWYG editor.

9. Click the Update button. 

Note: If the embedded content does not show up immediately, try refreshing your browser window.