Autoplay a YouTube Video — Only when shown!

#1

I’m close to doing what I want, but not quite there.

I have an ad banner that when clicked, reveals a YouTube video by sliding it down below the banner and pushing everything else down the page (OnClick Show Video slide down 500ms push widgets below).

I added “?autoplay=1” to the inlineFrame Frame Target URL code and the video actually does start to autoplay when the page is loaded. However, when the page is loaded the video is hidden (as it is supposed to be) — but the audio starts before the ad banner is clicked!

How (where) can I set autoplay for a YouTube (or any) video, but only when the Inline Frame is revealed and not before?

Thanks : )

#2

Hi Figment,

You’re very close! Rather than having the Open Link interaction on the iframe itself, you can create this interaction to add to the OnClick of the banner instead:

AutoplayonShow.png2132×1382 496 KB

I’ve also attached a quick example file to demonstrate this. Lmk if you have any questions!

AutoplayOnShow.rp (46.4 KB)

Axure and video files
#3

Jane —

Thanks for the suggestion. I hadn’t revealed the option.

I made the change, now the audio plays but there is no video. What am I missing?

Fig

#4

Hi Figment,

Could you post your .rp file here for me to test? That’ll be the fastest way to troubleshoot the issue. If you’d rather keep the file private, you can send that over to support@axure.com.

#5

Inline Video Show : Hide.rp (117.3 KB)

Hi Jane,

I can get this to show and play. I can get this to hide — but the audio restarts.

The “drink smart water…” starts it.

The smart water logo stops it.

Getting the audio to stop is one thing. I’d also like to present it better than simply appearing. That is, slide down / slide up — if possible.

Thanks,
Fig

#6

Hi Fig,

Gotcha - thanks for clarifying. I’ve been playing around with the YouTube controls and your file, and it doesn’t look like ?autoplay=1 works when shown with an animation. I tried a variety of combinations using resize, move, enable/disable, but it looks like the autoplay code does not work for certain conditions. As such, I’m afraid the only solution is to remove the slide up/down animations to get the autoplay code to work, but hopefully this helps a bit.

#7

Hi Jane,

Thanks for giving it a look.

I’ll give it a try with some self-hosted videos and see if I fair any better.

Regards,
Fig

#8

Since April 2018, Google made some changes to the Autoplay Policy. You not only need to add the autoplay=1 as a query param, but also add allow=‘autoplay’ as an iframe’s attribute

So while embed youtube video, you will have to do something like this:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>