Separate button that activates or plays youtube video on page

Design help General
1

is there a way to create a separate button from div or button that once clicked plays a separate

youtube file or embed on page

2

Yes, using Javascript.

If you’re using a <video> element, JS has built-in player controls.

A native YouTube embed is trickier, but can be controlled using YouTube’s player library which I think is called player.js

If you’re using Webflow’s Video element ( not the YouTube element ), then there’s an added layer as Embedly is involved there, and you’d use the embedly player.

In general the fewer layers the better- a straight <video> element is the easiest approach.

3

You’ll want to use the YouTube Iframe API , it lets you trigger play/pause from any custom button. I’ve wired this up before by giving the iframe an ID, then using player.playVideo() on click. Docs: YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google for Developers

4

what I need is a sepratebutton outside the youtube video in the website that when clciked plays the youtube video

5

Hi Michael, yes, I understand what you’re asking for.
Did you use my guidance above?

Again, avoid using Webflow’s Video element here, and use the YouTube element or a direct <video> embed so you avoid the double-IFRAME permissions issues that Embedly introduces.

If you’re needing this built for you, it’s a small build- drop me a message.

6

Hey @Michael_Pasquini,

I came across this CodePen while checking out some tutorials for your use-case. I have not personally tested it out, but this should give you some idea. It works for me on FireFox. You might need to test if you can take inspiration from the approach and also test if it works on different browsers, devices etc. Hope this helps.