YouTube video in Storymap not playing as expected

[AshleyPeters]

I am in the process of moving/recreating several storymaps from classic to the new storymaps. In the Cascade template, I have a YouTube video embedded that is playing a 10 second snippet of a video on a continuous loop. I am using this code to embed the video: www.youtube.com/embed/LK2lr3zTs84?start=76&end=86

In the new storymaps, I am using more of the YouTube player parameters to try to achieve the same experience for the user. Currently, that code looks like this:

https://www.youtube.com/embed/LK2lr3zTs84?autoplay=1&controls=0&start=76&end=86&loop=1

With this code, the video will play that 10 seconds, then jump straight to related videos. I've tried adding in the playlist parameter and such, but nothing I've tried will give me the same experience.

Is this a limitation of the new storymaps builder being based on JS 4.x?

[OwenGeo]

Hi @AshleyPeters -- When the builder validates a URL that you want to add as an embed, it removes URL parameters, which optimizes the experience in most cases.

But if you need to use URL parameters in your embeds, you just need to wrap the URL in an iframe like this:

<iframe src="[your URL]"></iframe>

[AshleyPeters]

Hi Owen,

Thanks for getting back to me. I've made that change, but it's doing the same thing. It plays the 10 sec clip, doesn't loop, and gives me related videos at the end. Code I'm using is:

<iframe src="https://www.youtube.com/embed/LK2lr3zTs84?autoplay=1&controls=0&start=76&end=86&loop=1"></iframe>

Browser I'm using to test is Firefox, if that potentially makes a difference.

[OwenGeo]

@AshleyPeters -- Sorry, I should have tested your links before replying. If I just open either of the links you included above directly in a browser window (outside of the story builder) I see the same behavior you describe (no looping). So this is not an issue caused by embedding the video in a story. If the video doesn't loop with your links outside the story, it won't loop when embedded either.

You can review YouTube's URL parameter documentation to see how to correctly use the `loop` parameter, and note that the doc mentions that support for the loop parameter for embedded videos is limited.

I got the video to loop using the embed code below, but it doesn't loop the 10-sec clip. Once the 10 seconds is done, the video loops back to the beginning. Unfortunately, you can only control a YouTube video using the parameters and controls that YouTube provides.

<iframe src="https://www.youtube.com/v/LK2lr3zTs84?autoplay=1&controls=0&start=76&end=86&loop=1&playlist=LK2lr3zTs84"></iframe>

I'm not sure if you have access to the original video file, but if you do you could clip out the 10-sec portion, upload it in the story builder, and then use the video properties to make the video loop.

[AshleyPeters]

Thanks Owen! We knew clipping and uploading was an option, but we don't have the original file. 

The original link (www.youtube.com/embed/LK2lr3zTs84?start=76&end=86) is working as expected in Storymaps Classic (it's in a Cascade template storymap found here), but doesn't work the same in the new storymap builder. Going back to my original question, is this a limitation of the new storymaps builder being based on JS 4.x?

[OwenGeo]

@AshleyPeters -- Thanks for the additional link to your cascade story. This isn't related to the 4.x JSAPI, that is the underlying technology that powers the mapping capabilities of StoryMaps. It doesn't directly affect integration with media services like YouTube.

We looked into this more, and even though it seems like a small thing we did some significant custom work directly with the YouTube API to create this behavior in Cascade. We have not done that in ArcGIS StoryMaps for a few reasons. One reason is that it supports uploading video files, which ultimately provides more control over the video experience. Unfortunately, I realize this doesn't help in your situation since you don't have the original video. 😞

We don't currently have plans to recreate the same integration with YouTube that was there in Cascade, but you can add this as an idea on the Ideas board if you'd like to see this considered for a future release.

[AshleyPeters]

Thanks Owen! That additional bit of information will help me offer solutions for changes as we move forward with migrating this StoryMap from Cascade.