Story Map Journal - Serious audio bug with Chrome - on load autoplays all audio from any embedded Youtube video content

[PatrickGallagher2]

I wonder if anyone can assist with a very serious audio issue we are experiencing with our Esri Story Map.Journal.

The StoryMap seems to load absolutely fine on all browsers - Firefox, Safari - except the latest version of Chrome.

In the latter case, audio content in the StoryMap seems to be automatically autoplayed upon load .. even though we do not currently have any autoplay enabled on any of the audio or video content. Specifically, it seems to be audio from embedded Youtube content within subsequent sections of the StoryMap (ie. not even from the first visible section of the StoryMap:

https://www.arcgis.com/apps/MapJournal/index.html?appid=fcd19e6e2a054961bb324798b6d382de

The thing that is most strange is that the StoryMap was working fine on Chrome up until about late September. We had a reasonable amount of video and audio content (mostly audio from embedded Youtube content) and the StoryMap had been working fine for well over 6 months prior to that. I am certain we didn't change anything or add any further video/audio content but suddenly the autoplay issue on Chrome started appearing.

I did some further investigation and testing of this issue across different browsers and OS's. I used Browserstack and I could recreate the problem on Chrome version 63  on both MacOSX and Windows. As stated other browsers and other OS's seem to be fine.

I found some links about an update in Chrome 63 that will change the behaviour of autoplay and not allow websites to automatically play audio:

https://venturebeat.com/2017/09/14/chrome-will-no-longer-autoplay-content-with-sound-in-january-2018...

https://www.forbes.com/sites/leemathews/2017/09/15/google-chrome-stop-autoplay/#1864ceb78efa

However, the current behaviour is that instead of restricting audio in fact when you load an Esri StoryMap on Chrome it is now actually autoplaying ALL Youtube audio content from contained videos (even though autoplay is not enabled on any Youtube video content).

What is also strange is that I also experienced this audio issue on Chrome version 62.0.3202.75 prior to my Chrome browser on my MacBook Pro automatically updating to version 63.

As said it appears to be audio from Youtube content in the StoryMap. There are about 11 or so Youtube videos embedded throughout the StoryMap (most playing in the Main Stage panel). Again, as mentioned, none of these are set to autoplay. You have to explicitly click on them to play.

We have 2 or 3 other audio files that can be playing by using the audio html tag as described in the blog below:

https://developerscorner.storymaps.arcgis.com/using-the-html-audio-tag-in-your-story-map-f818d931625... 

However, I can't hear any of these autoplaying upon the StoryMap load (it is quite noisy so hard to tell for certain but I am pretty certain these audio files don't autoplay like the Youtube audio). It seems specifically to be the audio from the Youtube content in the StoryMap.

We have spent over a year working on this StoryMap and it is intended to be the first in a number of such StoryMaps telling the stories of men from Arranmore Island, County Donegal who fought (and many killed) in WW1.

We are ready to launch the first one - the Story of Dominick Gallagher, my father's uncle:

https://www.arcgis.com/apps/MapJournal/index.html?appid=fcd19e6e2a054961bb324798b6d382de

However, this is a complete blocker for us as many of the target audience will be Chrome users and the audio problem will stop them from using the StoryMap.

We are at a loss as to where to turn next to solve this. The problem is only apparent on Chrome latest versions and not other browsers.

We would be super grateful for any help in helping us address this issue or else the last year will have been wasted building this StoryMap as it will be unusable on Chrome.

I assume this serious problem will also be apparent for other Chrome users with embedded Youtube video content. It only started appearing for us in late September 2017. Prior to that, it had been completely fine for the previous 6 months.

Many thanks in advance for any help anyone can offer.

Patrick Gallagher

[AlisonSizer]

Hi Patrick,

Wow, this is a terrible bug. Thanks so much for all the details you included. I'm looking into it, and will let you know what I find. 

Alison

Story Maps Dev

[AbrahamKohen]

1. Go to “chrome://flags” in the URL bar and hit Return/Enter
2. In the search box at the top, type in “autoplay”
3. Look for “Autoplay policy” and pull down the submenu, then choose “Document user activation is required”

1. Relaunch Chrome for the setting to take effect

[AlisonSizer · Accepted solution]

Hi Patrick,

Your Map Journal contains some Story Actions that play videos in the Main Stage area when a user clicks on an image or video or link in the Side Panel. All of these videos have been configured as a type "webpage" instead of "video" and the urls for these do have autoplay=1 in them. I'm not sure why all these webpages are being loaded when the Map Journal loads, but that's what's happening. I can look into that on our end.

In the meantime, there are a couple ways to fix this on your end, both of which involve using ago-assistant. Here are some resources for learning to use this tool:

https://developerscorner.storymaps.arcgis.com/editing-the-configuration-of-a-story-map-7b984560b7c2 

more screenshots:

https://community.esri.com/thread/194606-my-story-map-wont-open-after-i-made-it-it-just-shows-the-lo... 

If you've never used (or are not super comfortable with) ago-assistant, please read these articles above, and please copy your story's json to a text editor before editing it within ago-assistant. 

The easiest way to fix this, with the fewest changes to the data behind your story, would be to find YouTube urls with autoplay=1 in the story's json and remove that url parameter. However, this would mean that, after your users click a video thumbnail in the Side Panel to play it in the Main Stage, they would also have to click a play button in the Main Stage for the video to actually play. 

To make this change, search your json for "autoplay" and you'll come across lines that look like this:

"frameTag": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/eLKJL-9vpcw?rel=0&amp;autoplay=1\" frameborder=\"0\" allowfullscreen=\"\"></iframe>",

Just remove &amp;autoplay=1 so it becomes this:

"frameTag": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/eLKJL-9vpcw?rel=0\" frameborder=\"0\" allowfullscreen=\"\"></iframe>",

However, the ideal way of fixing this problem would be to change these actions from "webpage" to "video" media type. This would preserve the "autoplay" nature of the video when a user clicks on the thumbnail, and eliminate the play-on-app-load problem. 

Here is what one of your video Story Actions currently looks like:

 "id": "MJ-ACTION-1492281048304",
 "type": "media",
 "media": {
  "type": "webpage",
  "webpage": {
    "url": "",
    "type": "webpage",
    "display": "stretch",
    "unload": true,
    "frameTag": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/eLKJL-9vpcw?rel=0&amp;autoplay=1\" frameborder=\"0\" allowfullscreen=\"\"></iframe>",
    "ts": 1492281048304
  }
 }

And here is what it would need to be changed to:

"id": "MJ-ACTION-1492281048304",
"type": "media",
"media": {
  "type": "video",
  "video": {
    "url": "//www.youtube.com/embed/eLKJL-9vpcw?rel=0&autoplay=1",
    "type": "video",
    "display": "stretch",
    "ts": 1492281048304
  }
}

Three occurrences of "webpage" become "video", the url from the "frameTag" property goes into the "url" property instead (drop the "https:" and just start the url with "//"), and the properties "frameTag" and "unload" are deleted. (Note "&amp;" just becomes "&") But by keeping "autoplay=1", the user won't have to click on the Main Stage video to get it to play.

You also have regular Main Stage videos (not Story Actions) that are currently configured as webpages. This doesn't seem to be causing problems at the moment, but it's recommended that these be configured as videos, and you can do that within the Builder. For instance, if you edit section 4, you'll see this screen for the Main Stage:

The content in the Main Stage is actually a YouTube video, but note it's been configured as a web page. If you click the "Back" button, you can copy the url to the YouTube video, then switch to the "Video" media type, and paste the url. 

[PatrickGallagher2]

Nice work dude.

[PatrickGallagher2]

Hi Alison

Wow, I can't thank you enough for the comprehensive and detailed response on how to address a problem that was a a complete blocker for us.

I followed all your very clear instructions on how to resolve the audio bug using the ago-assistant and it worked PERFECTLY!

I am extremely impressed at the support we have received from the StoryMaps dev team. Not only has it fixed the problem but it has also given me a much better understanding of the data structure for the StoryMap content to better diagnose any issue that might potentially crop up again.

You are an absolute star Alison. Thank you so much.

Sorry for the delayed thanks to your response but I have been in France for the last couple of days for New Year and only got back to London last night. Today was the first opportunity I had to try your solution.

The StoryMaps dev team ROCK!!

Happy New Year.

cheers

Patrick

[PatrickGallagher2]

Hi Alison

Still a bit confused as to why this issue only surfaced on Chrome. As mentioned, the problem was not present on Firefox or Safari which made me think that it must be a Chrome specific problem. However, anyway, I am glad that it was resolvable from the StoryMaps end.

One last thing if I may? With regards to your last point:

You also have regular Main Stage videos (not Story Actions) that are currently configured as webpages. This doesn't seem to be causing problems at the moment, but it's recommended that these be configured as videos, and you can do that within the Builder.

I did this for most of them using the Builder.

One problem I noticed is that when I do this for a couple that contain music videos from Youtube (to support the story) it doesn't respect the original parameters. For example, in the last section 'Lest We Forget', I have:

<iframe width="560" height="315" src="https://www.youtube.com/embed/5GxLOenKHjE?rel=0&end=88" frameborder="0" allowfullscreen=""></iframe>

However, when I change it to Video with the following url (instead of Webpage with the above iframe):

 https://www.youtube.com/embed/5GxLOenKHjE?rel=0&end=88

1. it doesn't respect the end parameter. As it's a long music video and I only want to play the first 88 seconds of it.

2. It also now shows adverts whilst playing (which it didn't with the webpage iframe version

3. And, for this one particular section, the last one, ideally I would also like it to autoplay when the section scrolls into view. Prior to the audio bug, I would have been able to do something like the below by adding the autoplay parameter to the iframe:

<iframe width="560" height="315" src="https://www.youtube.com/embed/5GxLOenKHjE?rel=0&amp;autoplay=1&amp;end=88" frameborder="0" allowfullscreen=""></iframe>

Again, with the switch to using video rather than webpage, it does not respect this autoplay parameter in the following format:

https://www.youtube.com/embed/5GxLOenKHjE?rel=0&autoplay=1&end=88

However, if I configure it to use the webpage iframe as referenced above, the audio problem of autoplaying on StoryMap load again appears for this one particular audio only on Chrome. So that doesn't work either.

Sorry to be a pain but do you have any suggestions for the above? If not, no worries.

thanks again for all your support.

Patrick

[PatrickGallagher2]

Hi Alison

Actually I noticed it does show an advert when I use the webpage iframe version as well

[PatrickGallagher2]

Maybe I can only turn off ads on my own Youtube content and not that belonging to others, such as in the music video above so point 2 may not be addressable anyway.

Would appreciate any pointers with points 1 and 3 if possible.