Cargo home Twitter Devlog

Adding video to your site

Last Updated: Jan 22, 2017 06:22PM PST
There are many ways to add video to your projects and pages. Cargo provides a built-in player, and most video sharing sites have an embed code that can be pasted directly into your project content. These are some of the most popular options:



Cargo’s video player
Flash-based with HTML5 fallback
Will not function with Youtube or Vimeo-hosted videos


Cargo’s native video player can be used to embed externally hosted .MOV / .M4V files which use the H264 video codec with AAC audio. When exporting the .MOV with Quicktime, make sure that “Prepare for Internet Streaming” is checked: choose "Fast Start" inside the drop down menu. More information on personal file hosting is here.

Copy the publicly accessible URL to your video to your clipboard, then navigate to Cargo’s project editor, click the video icon, and paste the URL. You also have the option to include a custom preview image (“posterframe.jpg”). URLs from cloud hosting and backup services like Dropbox, Cubby, or Google Drive will not work.
{video=http://example.com/video.mov width=640 height=360 poster=http://cargocollective.com/example/posterframe.jpg}


YouTube (Flash and HTML5)
YouTube URLs in Cargo’s {video} tag will not function

 
When viewing a video on YouTube click on the “Share” button, and then the “Embed” button below the video to reveal its embed code. Set an optional custom width and height, then paste the embed code into your project’s Contents & Layout area.
<iframe title="YouTube video player" width="640" height="510" src="http://www.youtube.com/embed/HeDnPP6ntic" frameborder="0" allowfullscreen></iframe>


 
Vimeo (Flash and HTML5)
Vimeo URLs in Cargo’s {video} tag will not function.
 
Vimeo’s embedding method is similar to Youtube’s. When viewing a video on Vimeo, click on the “Share” button in the upper-right corner of the video to open a dialog box that shows all of your embedding options. Click "+ Show options" in this box to show more embedding options and a preview of your video. 
 
After choosing your embedding options, paste the embed code into your project’s Contents & Layout area.
<iframe src="http://player.vimeo.com/video/7517418?title=0&byline=0&portrait=0&color=00b952" width="971" height="728" frameborder="0"></iframe>
 
 
 
HTML5 Video Tags 
Requires two different file formats for full compatibility

 
Video can also be embedded into your projects by using the new HTML5 <video> tag, which is supported on most modern browsers and doesn’t require Flash. It’s currently recommended that you encode your videos as a Quicktime .mov, using the H264 codec and AAC audio track as outlined in the Cargo video player instructions above.
 
After encoding and externally hosting your video, copy the public link to it and place it in video tags in your project’s Contents & Layout area like so:
<video width="640" height="480" controls>
  <source src="http://example.com/movie.mp4" type="video/mp4">
  <source src="http://example.com/movie.ogg" type="video/ogg">
</video>

Additional attributes can be added to the video tag, as explained here at the Mozilla Developer Network.

As HTML5 represents the cutting edge of HTML browser technology, support among browsers (and video formats) is not entirely equal. In time, different video/audio formats may become necessary. See this Wikipedia page for more info: http://en.wikipedia.org/wiki/HTML5_video#Table

 
Mobile accessibility
Playback on mobile devices requires a non-flash based player. Youtube and Vimeo both provide mobile-friendly embed codes.
tickets@cargocollective.com
http://assets1.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete