Streaming live at 10am (PST)

Custom elements of controls YouTube video (IFrame Player API)


#1

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?


When asked for help on the forum. Expectation/reality
#2

As always…no one


#3

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

Not as always :smiley:


#4

Yep, I searched and found nothing useful for me.


#6

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


#7

Thanks, @bart !

How can I remove the black bars from the video?


#8

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