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?
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?
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.
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?
