Embedding Videos

Embedding a video from YouTube or Vimeo is a quick and easy way to add useful content to any page of your site, using the Text Area snippet.  Select a video to share, and follow these steps depending on which site you are using.

Covered in this Article:

• Get the Embed Code (YouTube Vimeo)
• Insert the Embed Code
• Video File Uploaded Elsewhere (Not YouTube or Vimeo

Get the Embed Code

➧ From YouTube

Click Share under the video, and then click Embed. Copy the text that starts with "<iframe" in the box to your clipboard.

➧ From Vimeo

On Vimeo, click Share on the right-hand side of the video.  

Another window will pop up. Copy the text from the Embed box to your clipboard.

Insert the Embed Code 

On your SwimTopia website, select Edit Page Content from the Manage Website menu at the top of the page you would like to embed the video into.

Click the +Add Snippet button and drag in a new Text Area snippet. 

 In the New Text Area box, click the Video Embed icon in the tool bar, and then paste the text you just copied into the Video Embed Code text area that pops up. Click Insert at the bottom. 

 Give your video a title, click the Create button, and you are done!

Video File Uploaded Elsewhere (Not YouTube or Vimeo)

You can also embed a video that’s uploaded elsewhere, such as Dropbox. 

➧ Step 1: Upload your video file somewhere publicly accessible

Your video file will need to be accessible to anyone to have it play in your SwimTopia page.

General Custom Video Embedding

You can embed a video player in your SwimTopia page using code like the following (Note: Web video codec guide). This example uses an MP4 file (this is a pretty standard video format for Macs—change “.mov” to “.mp4” to play the video in a web page):

<video controls width="560">
  <source src="/path/to/video.mp4" type="video/mp4">
  <p>Sorry, your browser doesn't support embedded videos.
     Here is a <a href="/path/to/video.mp4">
     link to your video</a> instead.
  </p>
</video>

There are numerous options for this code, see The Video Embed element on the Mozilla Developers Network for more.

Dropbox Video

For video stored as files on Dropbox, you can embed the video using similar code. Dropbox supplied a link that works for downloading, but not playing in an embed. You will need to change the part of the link at the end like so (catwalksacrosskeyboard will be a unique value made of letters and numerals):

https://www.dropbox.com/s/catwalksacrosskeyboard/test.mp4?dl=0

to:

https://www.dropbox.com/s/catwalksacrosskeyboard/test.mp4?raw=1

Caveats

As always, it’s best to keep a copy of the code you used to create your embedded video player because SwimTopia’s text editor will not retain all the information after you paste in the code in the code tab and then save. If you open the code view and save it again, it won’t work.

➧ Step 2: Paste the code into a new Text Snippet on your SwimTopia site as described in the main “Embed a Widget” article.