Streaming live at 10am (PST)

Custom elements of controls YouTube video (IFrame Player API)

In short. How to implement custom elements of controls from YouTube video, like on this page (the first big video)? I just know that it’s all done with the IFrame Player API. Who did something like this in Webflow or has an idea how to implement it?

My project:
http://nurture-6b6e05.webflow.io/
https://preview.webflow.com/preview/nurture-6b6e05?preview=499719d018cf9448b88324b676d1cc5c

P.S. I created such a html file with primitive custom controls. Link.
And I’m thinking of putting html code in “html Ambed”. And it will look like html-frame inside html page. Am I right or not? Who can give me the ready html code of the video frame with the YouTube and with the controls identical, as on that site, which I could embed on the page in the Webflow in the manner described above?

As always…no one

Have you search this forum for everything that has been written about Youtube API?

Not as always :smiley:

Yep, I searched and found nothing useful for me.

Hey @Barsik

I think the problem is not about people not willing to respond in the thread, but the fact that it’s a complicated process – especially that it’s written here: https://developers.google.com/youtube/iframe_api_reference.

What that website you provided as an example has, is a set of custom JavaScript functions to communicate with Youtube Player API. All controls are written here: https://developers.google.com/youtube/iframe_api_reference#Playback_controls.

The implementation process is based on data-custom attributes added to HTML nodes, like div etc.

<div data-player="controls">
  <img src="play.png" class="playerplayicon" />
  <img src="pause.png" class="playerpauseicon" />
</div>

and a set of javascript added in custom code to do certain things on those items

$('[data-player="controls"]').click(function() {
  if(player.state === "playing") {
    // if it's currently playing → pause
    $('.playerplayicon').css('display', 'none');
    $('.playerpauseicon').css('display', 'inline-block');
    player.pauseVideo();
  } else if(player.state === "paused") {
    // if it's currently paused → play
    $('.playerplayicon').css('display', 'inline-block');
    $('.playerpauseicon').css('display', 'none');
    player.playVideo();
  }
});

This is a really basic example of how to connect Webflow project with their api. All custom code you have to add, do it in Page Settings → Custom Code section.

Hope this helps!
Bart

2 Likes

Thanks, @bart !

How can I remove the black bars from the video?

If resizing the video didn’t do the trick, then the video might have those bars embedded into the video itself. ¯\_(ツ)_/¯

1 Like

Would you mind elaborating a bit more on the custom div. When selecting the video player, custom div displays two fields “Name” & “Value”. How would that work with you example code?