Embedding Videos

If you are experiencing issues with your YouTube videos layering on top of other elements (you'll know if it happens), please call us at 405-478-4080 or file a support ticket and we'll install the YouTube module on your site.

Disclaimer

The information contained within the following tutorials is not guaranteed to be up-to-date, as each site updates frequently and without prior notice. If these tutorials are no longer valid, please file a support ticket and we'll update them as soon as possible.

Back to Top
Embedding YouTube Videos

Step 1: Go to http://youtube.com and find your video.

Step 2: Click "Share" under the video. It's immediately before the description, but under the ratings.

Step 3: Click "Embed" from the area that appears. It's immediately to the right of "Share this video."

Step 4: Use the "Video Size" dropdown to choose the desired size of the embedded video.
Step 4a: Choose "Custom Size" and type the width or height in the fields to the right of the dropdown.

Step 5: Copy the code in the box.

Step 6: Go to your website.
Step 6a: If necessary, log in, navigate to the appropriate webpage, and add a Text module.

Step 7: Edit the Text module and open the HTML view.

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 8: Paste the code into the resulting popup.

Step 9: Click "Update".
Step 9a: If desired, click the black box/video preview and click the "Align Center" button to center the video.

Align center is the eighth button from the right on the top row of the editor.

Step 10: Save the Text module.

Back to Top
Embedding Single Videos from YouTube Playlists or the Entire Playlist

Step 1: Go to http://youtube.com and find your playlist.

Step 2: Click "Share" under the playlist. It's immediately before the description, but under the ratings.

Step 3: Click "Embed" from the area that appears. It's immediately to the right of "Share this video."

To Share Just the Video

Step 4: Uncheck the "Share with playlist from…"

To Share the Entire Playlist

Step 4: Use the "Share playlist from…" dropdown to select the starting video.

Step 5: Use the "Video Size" dropdown to choose the desired size of the embedded video.
Step 5a: Choose "Custom Size" and type the width or height in the fields to the right of the dropdown.

Step 6: Copy the code in the box.

Step 7: Go to your website.
Step 7a: If necessary, log in, navigate to the appropriate webpage, and add a Text module.

Step 8: Edit the Text module and open the HTML view.

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 9: Paste the code into the resulting popup.

Step 10: Click "Update".
Step 10a: If desired, click the black box/video preview and click the "Align Center" button to center the video.

Align center is the seventh button from the right on the top row of the editor.

Step 11: Save the Text module.

Step 1: Go to http://youtube.com and find your video.


Step 2: Click "Share" under the video. It's immediately before the description, but under the ratings.


Step 3: Click "Embed" from the area that appears. It's immediately to the right of "Share this video."


Step 4: Use the "Video Size" dropdown to choose the desired size of the embedded video.
Step 4a: Choose "Custom Size" and type the width or height in the fields to the right of the dropdown.


Step 5: Copy the code in the box.


Step 6: Go to your website.
Step 6a: If necessary, log in, navigate to the appropriate webpage, and add a Text module.


Step 7: Edit the Text module and open the HTML view.


Edit HTML source is the first button from the right on the bottom row of the editor.


Step 8: Paste the code into the resulting popup.


Step 9: Click "Update".
Step 9a: If desired, click the black box/video preview and click the "Align Center" button to center the video.


Align center is the eighth button from the right on the top row of the editor.


Step 10: Save the Text module.

Back to Top
Embedding Vimeo Videos

Step 1: Go to http://vimeo.com and find your video.

Step 2: Hover over the video and click the "Share" button from the right-hand side.

Step 3: Click the "Show Options" link above the final field.

Step 4: Use the options beneath the video preview to customize the embedded video

  • Size ← The embedded video's width and height
  • Color ← The color of the overlay text
  • Intro ← The elements to display on the video's preview
  • Autoplay this video ← Autoplay when page is loaded
  • Loop this video ← When video is played, it automatically restarts
  • Show text link underneath this video ← Add links back to Vimeo.com
  • Show video description below video ← Add the description under the video

Step 5: Copy the code in the "Embed" field.

Step 6: Go to your website.
Step 6a: If necessary, log in, navigate to the appropriate webpage, and add a Text module.

Step 7: Edit the Text module and open the HTML view.

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 8: Paste the code into the resulting popup.

Step 9: Click "Update".
Step 9a: If desired, click the black box/video preview and click the "Align Center" button to center the video.

Align center is the eighth button from the right on the top row of the editor.

Step 10: Save the Text module.

Back to Top