Autoplay videos in Cascade Story Maps

[Anonymous User]

I'm trying to place a video in my Cascade Story Map which is uploaded on youtube. It should look like the video in this example. So what I want is:

- autoplay

- no thumbnail image, just black screen until video starts playing

- looping

I already read through this instruction where it is suggested to use the share function on youtube where a "<iframe>"-Link is generated. But when I insert this link in my the Story Map it is always reduced to the basic youtube link and all of the parameters such as autoplay and looping don't work.

Do you have any suggestions?

[OwenGeo · Accepted solution]

Unfortunately, URL parameters aren't currently supported for YouTube videos in the Cascade builder. YouTube videos autoplay if you are using one on the cover or in an immersive section, but they don't loop. If you need a video to loop the easiest way to accomplish this is to upload your video to Vimeo as Cascade currently supports autoplay and looping for Vimeo videos.

We plan to add more options to Cascade in the future so that you can configure video behaviors like looping, autoplay, and start/end times in the builder rather than having to use URL parameters.

For now -- if you don't mind making an unsupported alteration to your story -- you can do what you want with a little hackery, as described below. There is some risk in doing this that you could break your story. I would recommend trying this procedure on a test story a few times first until you are comfortable with it before attempting on your real story.

1. Using Cascade builder, find the place in your story where you want your looping YouTube video to appear and insert any web page (e.g., www.esri.com) using the Link to Content tab in the media picker.
2. Save your story.
3. Sign into the ArcGIS Online Assistant, which is a tool that lets you edit the JSON story definition stored in ArcGIS.
4. At the top choose I want to...View an item's JSON.
5. Find your story in the left panel and click it. The JSON code for your story map appears in the right panel.
6. In the Data section of the right panel, find the URL you entered in step 1.
7. Replace www.esri.com (or whatever URL you added in step 1) with the YouTube URL for your video that includes the URL parameters. Use the protocol relative format (don't include http: or https: -- the URL should just start with //www.youtube.com/...). See the example code below.
8. Save the changes to the JSON using the save button at the top of the Data section.
9. Reload your story to see your looping video.

If you want to use a YouTube video on the cover of your Cascade story you'll need to alter the procedure a bit...

In place of steps 6 and 7, copy the entire code snippet below and paste it in to replace the background section of your story's cover (which includes width,  height, and the bracket on the next line, see below). Then replace the URL placeholder with the URL of your YouTube video with URL parameters, and save the changes to the JSON. Make sure all the pairs of brackets match up or the JSON won't validate and you won't be able to save.

        "background": {           "type": "webpage",           "webpage": {             "type": "webpage",             "url": "//www.youtube.com/embed/..."           }

For example, here's a before and after of the JSON:

Before

After

[SuddhaGraves]

Hi Owen,

I am trying to add a video from a server to a Cascade Story Map and have it automatically play and loop when the user gets to the page where it is added.  I was able to get it added, but the user would have to press a play button for the video to start.  Is there a way to get it to automatically start playing vs having to press a play button?

Thanks,

Suddha 

[OwenGeo]

Hi Sudda -- if the video is on a server, then it's really a question of whether the player that the video uses supports autoplay and if the video has sound. You might want to see this blog about how videos with sound work in Cascade stories. Chrome has recently changed some of its policies around autoplaying videos.

[RiccardoKlinger2]

works like a charm!

For everyone who woul like to copy the URL params as the folks just posted images:

autoplay=1&loop=1&controls=0‍

And no, it works without the &amp; syntax 😉

[TonyViveiros1]

I'm trying to include only a specific portion of a youtube video as the cover of my cascade story map.  I would only like the first 17 seconds of the video to play and have this loop as well.  I've tried what's been suggested here by editing the original JSON code and creating the code below within ArcGIS Online Assistant.  However, the video loops only once (it plays in its entirety after the first loop) and audio is also present now (wasn't the case when I originally tried linking to the video from the cascade story map template).  Any suggestions on how to remove the audio and get the cascade intro video to loop from 1-17 seconds endlessly?

Thanks.

Tony