Embed A Custom Video

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 again, it won’t work.