Spinternet Insider: How do I add a YouTube video to the content of a page?

Spinternet Insider: How do I add a YouTube video to the content of a page?

By Jeremy Karns on March 12, 2013 in Training

(Spinternet Insider is a blog series covering the ins and outs of Spinternet...from basic functionality to the most advanced customizations, each Spinternet install is built to serve the needs of it's client. If your Spinternet differs from the example below, give us a call and let us walk you through it. Read. Learn. Enjoy.)

How do I add a YouTube video to the content of a page?

While Spinternet installations vary based on their customizations, the easiest way to add videos to the content of your site is with embed code...don't worry, it's easier than it might initially seem.

YouTube, and most other video sites for that matter, allow you to embed videos on to your site by simply copying/pasting a line of code provided by the site on an individual video basis. For the sake of this article, we'll be talking about YouTube specifically.

There are essentially five steps:

  1. Open the Spinternet page where you'd like to add the video
  2. Click Source to edit the HTML
  3. Copy Embed code (note the option to change video size)
  4. Paste Embed code into Spinternet within the HTML Source
  5. Click Source to go back to the normal view (WYSIWYG editor)

Let's take a closer, more detailed look at each of these steps individually.

1. Open the Spinternet page where you'd like to add the video

So far, so good, right? Any user, new or old, familiar with Spinternet should know this interface pretty well.

2. Click Source to edit the HTML

Not all Spinternet users know HTML let alone dig into it within Spinternet, but as mentioned above...this will be easier than it might initially seem. Notice after clicking the Source button how the text within the window changes. What you're seeing is the raw HTML that makes up this portion of the page. Don't worry, any copy/images/etc you may have added is still there, you're simply seeing a behind the scenes look on how they are created. (If you're worried, simply click the Source button again and notice how the view changes)

3. Copy Embed code (note the option to change video size)

Open a browser window with the YouTube video you'd like to add on your site, and note the options below the video player. By default, all YouTube videos display the About information. In order to find the embed code follow these steps:

  1. Next to the About tab, click Share
  2. Under Share, click Embed
  3. Copy and paste the HTML shown in the box below (it should begin with "<iframe...") Leave all other checkboxes as-is. 
  4. If you'd like to change the video size, simply change the dropdown menu before you copy/paste the embed code

4. Paste Embed code into Spinternet within the HTML Source

Going back to the Spinternet and the HTML Source, simply copy/paste the embed code on a new line below the HTML code currently shown. This will place the video directly below any existing content. (For more precise placement, we suggest being more familiar with HTML in order to avoid adding/deleting any necessary code)

5. Click Source to go back to the normal view (WYSIWYG editor)

Almost done! Click Source to go back to the normal view (for reference, WYSIWYG = what you see is what you get). Your video should now be displayed within the content of your site, and should be playable right within Spinternet.

Adding embed code is a quick and easy way to display videos directly on your site without the need for advanced customization.

Need a little more assistance? Have other Spinternet related questions? Contact Spinutech or comment below...we're happy to help!

Subscribe to Our Blog

Get fresh updates and insights from Spinutech delivered straight to your inbox.