Hi,
I am trying to get an embedded (iFrame) youtube video to autoplay and loop. I can make it work perfectly in an editing session in the Map Journal Builder, but when I test the published story map(ex. click View Story) it doesn't work. It just shows a regular Youtube player with a Play button. Any idea why this may be -and if there is a solution I can apply?
The iframe I use looks like below. I have emphasized in bold the parameters I have added in order to implement autoplay and loop:
<iframe width="560" height="315" src="https://www.youtube.com/embed/f3jdft1dyuM?autoplay=1&loop=1&playlist=f3jdft1dyuM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
Thanks in advance,
Rikke
Solved! Go to Solution.
I found the solution. It turns out Google Chrome does not allow autoplay videos with sound. As sound was not an issue for me, I just added the mute parameters to the url, for example:
<iframe width="560" height="315"src="https://www.youtube.com/embed/f3jdft1dyuM?rel=0&controls=0&mute=1&autoplay=1&loop=1&playlist=f3jdft1dyuM"frameborder="0"allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
I found the solution. It turns out Google Chrome does not allow autoplay videos with sound. As sound was not an issue for me, I just added the mute parameters to the url, for example:
<iframe width="560" height="315"src="https://www.youtube.com/embed/f3jdft1dyuM?rel=0&controls=0&mute=1&autoplay=1&loop=1&playlist=f3jdft1dyuM"frameborder="0"allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>