I'm working with a website built with Hype Pro that has 3 embedded YouTube videos that are set to autoplay when they are loaded. For years, this used to work wonderfully until Google changed autoplay rules in 2018. Now, when the website loads in a browser, the videos are no longer allowed to autoplay.
I'm trying to figure out how to get them to play again! It seems all that is needed is for the site to register a button press or a user interaction and then autoplay will be allowed.
I've tried all sorts of things. I've tried to play the YouTube videos manually with a hype button (that triggers a .playVideo() javascript function). I haven't gotten that to work at all.
I've had some limited success by inserting an intro scene that forces the user to press a button to go to the next scene. If I preview the file in Hype and then refresh the browser, it works every time! But on first load it hardly works at all.
I have also scoured the Hype Forums for folks that have worked with triggering YouTube videos with javascript, but I've had no luck implementing any of the solutions I've found.
Totally stumped.
Does anyone have any ideas on how can I get this to work again?
First, note in the examples I unchecked the include in head for your .js files and added the links manually into the head so they would load after the jquery API.
You are still getting an error but I will leave that to you.
This is always tricky.
It may be better if you load your videos in a different way.
Have a look through this
The example below use this method . Since you have three videos I just duplicated the setup to keep it simple.
Firstly if you don't really need to have a external page with the vid embeds load via a widget/iframe and can have them on the main page. I would do similar to example 1.
Example 1 : uses rectangles with the innerHTML containing a div with an ID, The divs are the place holders for the video that the Youtube API needs.
There is a new API in the head that points to youTubes video embed API.
You still need the start button. User interaction is key.
When the second scene loads the vid1,vid2,vid3 code will run.
These will create and play the videos. Because we have user interaction we can play the videos with sound.
Example two : uses an embedded page linked widget on scene two.
The important thing for the embed. Is all of the above interaction but it also must have two scenes.( So I found )
When the embedded page ( external document ) loads it loads it's scene 1 then scene 2.
This seems to satisfy Chrome.
I cannot give any promises this will all work for you, especially as your setup will be different for the site. But it may get you started.
@MarkHunte, this all so helpful and so very much appreciated! I’ll dig into your examples in detail today. This site was built many years ago, so the notion that some restructuring may be needed makes a great deal of sense.
Again, I so appreciate the awesome input!
I’ll give this a shot with the roadmap you’ve provided !
!