A simple way to host videos for classic Esri Story Maps
This article covers a topic related to the classic Esri Story Maps templates. Story authors are encouraged to use the current-generation ArcGIS StoryMaps to create stories. However, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map.
It’s very easy to add videos from YouTube and Vimeo to a story map, but you can also easily add videos that you host yourself. You’ll need to host your own videos if you work in an organization that does not allow content to be hosted on third-party websites. This article describes a simple method for hosting your own videos so they can be used in story maps.
This method of hosting videos is also useful if you work with ArcGIS Enterprise, particularly Enterprise deployments on disconnected networks. Hosting videos on external sites is often prohibited or not possible in these environments.
See the end of this article for tips on using this method for hosting videos in disconnected environments.
It’s important to note that if you can host videos on YouTube or Vimeo, those are the recommended options. These services offer many advantages, such as optimizations for viewing videos on mobile devices and scalability for large numbers of requests.
Step 1: Post your video to the web
First, you’ll need to get your video on the web. You can put it anywhere that’s publicly accessible like your own web server or a cloud-based file hosting service such as Dropbox, Box, or Amazon S3. If using a cloud hosting service be sure to make the video file public using the service’s security controls.
Step 2: Create an HTML page to play your video
An open-source project called video.js lets you wrap a video file in a simple video player page that can be embedded. Hosting of the video.js files is provided (see note in last section if you can’t use the CDN-hosted video.js), so you only have to host your video file, a single HTML page, and an optional poster image that displays before your video starts playing.
Below is some sample code for a web page using video.js that will work well when embedded in a story map.
- Copy and paste the code below to a new .html file
- Replace MY_VIDEO with the path to your mp4 video file (Other formats are supported, you’ll just need to change the type attribute).
- Either replace MY_POSTER_IMAGE with the path to a preview or poster image for your video or delete the poster parameter. The poster image will be shown in place of your video when it’s not playing; otherwise, the first frame of your video will be shown. You can store the poster image in the same place as your video.
- Save the changes and post the HTML file on the web, either in the same place as your video file or another location. Make the HTML file public.
<head>
<link href="//vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet"> <!-- Support for IE8 -->
<script src="//vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> <!-- Body style tweaks, disable full-screen toggle -->
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.video-js {
width: 100%;
height: 100%;
}
.video-js .vjs-fullscreen-control {
display: none;
}
</style>
</head><body>
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="100%" width="100%"
poster="//MY_POSTER_IMAGE.JPG" data-setup="{}"> <source src="//MY_VIDEO.mp4" type='video/mp4'> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="//videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p> </video> <script src="//vjs.zencdn.net/5.9.2/video.js"></script>
</body>
Test your HTML page by opening its URL in your browser. If the page loads, you see a play button in the middle of the video, and the video plays as expected then you’ve done everything right and can move on to the last step. Seeing the play button in the middle of the video confirms your page is using video.js and not the default HTML5 player.
Step 3: Add the video page to your story map
Once your video and HTML page are on the web you can add your video to your story map:
- In Cascade: go to the Link to Content tab when inserting media and paste in the link to your HTML page.
- In Journal or Series (pictured below): add a new section, choose content type Web page, paste the URL for your video page into the story map builder, and use the Fill position option (it’s the default).
Other details
Browser support
Serving out video in an MP4 format will work for most browsers, but to provide video across the most possible browsers and devices you may want to provide one or more additional formats like WebM or OGV. Just add another <source> like this:
<source src="//MY_MP4_VIDEO.mp4" type='video/mp4'>
<source src="//MY_WEBM_VIDEO.webm" type='video/webm'>Web security
The code samples in this post use protocol independent references for all links, but if the web server where you’ve placed the video does not support https the video may only show up when the story map is accessed over http.
Disconnected environments
Hosting video.js — If your organization can’t use the CDN-hosted version of the video.js files you’ll need to download them from the project website and host them yourself. Just update the references in the HTML page to point to your copies of the video.js files. You’ll need to do this if you’re using ArcGIS Enterprise on a disconnected network.
HTML video — HTML video is supported across most browsers, so if it’s not important to have a consistent video player UI across each browser you can simply rely on HTML5 video which will use the browser’s native video player.
This can be a good solution for disconnected Enterprise portals since there’s no need to connect to CDN-hosted video.js files or even host them yourself.
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000;
}
</style>
</head><body>
<video id="my-video" height="100%" width="100%" poster="//MY_POSTER_IMAGE.JPG" controls>
<source src="//MY_MP4_VIDEO.mp4" type='video/mp4'>
<source src="//MY_WEBM_VIDEO.webm" type='video/webm’>
</video>
</body>
If you want to dive into browsers and formats in more detail, here’s some more reading on those topics:
- WebM vs. MP4 comparison
- CanIuse.com: HTML <video> | MP4 | WebM
This article was first published in April 2016 and was updated in Aug 2017.
