New template: Hover/tap for sound #294
Description
See: https://www.npr.org/2018/04/02/598287888/photos-why-they-marched-in-their-own-words
This should support:
- Photo
- Audiofile (MP3)
- Photo credit
- Caption (optional)
- Caption placement (left, right, bottom) (optional)
- Pullquote (optional)
- Pullquote placement (left, right, bottom) (optional)
Important note: Chrome now suppresses autoplay video and audio if the user hasn't interacted with a page. This seems to affect our "hover for sound" embedded projects, like pigeon races. The error I see in console:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
Passing the autoplay parameter to the iframe -- as mentioned here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe -- doesn't universally fix this. (Supporting the param also will require an update to the npr pym loader and to pym.)
In the short term, I think "click-to-play" is the best way to go. Longer-term, there's probably some kind of detection to see if autoplay is supported and, if not, display a click message instead.