Cargo home Twitter Devlog

Displaying fullscreen video

Last Updated: Sep 12, 2016 05:27PM PDT
To place a full-screen video loop in your website, start by preparing your video files for playback on the web. For best compatibility between browsers, you'll need two separate video files:
  1. An H264-format video, in the form of an .mp4 , .mov , or .m4v file. Most modern browsers can use this format.
  2. An OGG-format video, in the form of an .ogg or .ogv file. Firefox requires this format for compatibility


Vimeo has good guidelines on generating H264-format videos with many different programs. These and other programs are also capable of generating OGG files, such as MPEG Streamclip or the "Convert / Stream" menu command in VLC .

After you've generated the correct files, upload them to a file host. If your Cargo website has an Upgraded Subscription, you can use its Personal Files feature to store your video files. File lockers such as Dropbox or Google Drive will not work reliably when used as file hosts, and are not recommended.

Then, place the following code into the project, page, or — if you want to use it as a background for your entire website — your Custom HTML area.

<video id="fullscreen_embed" autoplay="autoplay" loop="loop">
    <source src="http://files.cargocollective.com/50277/terrestrials_trailer.mov" type="video/mp4" />
    <source src="http://files.cargocollective.com/50277/terrestrials_trailer.ogg" type="video/ogg"/>
</video>
<script>setTimeout(function() { var fullscreen_video = document.getElementById("fullscreen_embed"); fullscreen_video.volume = 0; if (fullscreen_video) { fullscreen_video.play(); fullscreen_video.onclick = function() { Projects.CloseProject();}}},100)</script>

​This places an HTML5 video element into your website that can autoplay looped video in your website.

Replace each URL ( http://files.cargocollective.com/50277/terrestrials_trailer.mov / http://files.cargocollective.com/50277/terrestrials_trailer.ogg ) with the URLs to the files that you generated in the first step.

Finally, place the following lines inside your website's CSS. Your CSS is accessible through your website's admin panel: Settings → Customization tools → CSS Inspector. The following code can be placed any any available blank line:

video#fullscreen_embed {
    position: fixed;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    margin: auto;
    min-width: 100vw;
    min-height: 100vh;
    z-index: 99999;
}

If you want the video to act as a background for your website, use this instead:

video#fullscreen_embed {
    position: fixed;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    margin: auto;
    min-width: 100vw;
    min-height: 100vh;
    z-index: -1;
    pointer-events: none;
}

Note: many mobile devices (specifically Android devices and iPhones) will not display videos in-line, so will not be able to display video contents full-screen.

tickets@cargocollective.com
http://assets3.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