controlling youtube videos ( loaded in the fancy iframes ) via youtube API

[halukkaramete]

when we play youtube videos,fancy box generates an iframe in the staged area as follows:

<iframe id="fancybox-frame1730290693734" name="fancybox-frame1730290693734" class="fancybox-iframe" allowfullscreen="" allow="autoplay; fullscreen" src="//www.youtube-nocookie.com/embed/oG-RuUA0CJA?autoplay=1&autohide=1&fs=1&rel=0&hd=1&wmode=transparent&enablejsapi=1&html5=1" scrolling="no" title="''I had a dream...'' Convert Muslim Baruska Evs #revertmuslim #shorts"></iframe>

But I do need to detect the video on pause, on stopped, on play youtube API events. the "enablejsapi" may make it happen I guess. but i could not see any sample code to make this happen with fancy. can you point me to some demo of someone who showcased it if you know anyone?

[halukkaramete]

The id "fancybox-frame1730292793426" is the one that makes enablejsapi=1 useless. If that ID were to be "player", then we would be home controlling YT all day long. Is there a way ( even a hacky way ) to let fancy to always generate id="
player" whenever it pops a YT URL?

Here is more info on this, FYI:

The enablejsapi parameter in a YouTube iframe URL enables the JavaScript API for the embedded player. Here's what it does:

Enables JavaScript API Control: By adding enablejsapi=1 to the iframe URL, you allow your web page to control the YouTube video player using JavaScript. This includes starting, stopping, pausing, and seeking within the video.

Event Handling: It allows you to listen for events from the player, such as when the video is played, paused, or has ended. You can respond to these events in your JavaScript code.

Access to Player Methods: With the API enabled, you can call various methods on the player object, such as:

playVideo(): Starts playing the video.
pauseVideo(): Pauses the video.
stopVideo(): Stops the video.
seekTo(seconds): Seeks to a specific time in the video.

Example Usage
Here’s a quick example of how the enablejsapi parameter is used in an iframe URL:

<iframe id="player" blah blah... src="https://www.youtube-nocookie.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allowfullscreen> </iframe>

In this example, replacing VIDEO_ID with the actual ID of the YouTube video will create an iframe that enables the JavaScript API for that video. You can then use the YouTube IFrame API to control the video and listen for events as needed.

Summary
In summary, enablejsapi=1 is crucial for any interactive features you want to implement with the YouTube player on your web page. Without this parameter, you would not have the ability to control the video or respond to events through JavaScript.

[halukkaramete]

Janis, I found this on the source.

iframe:{tpl:'<iframe id="**fancybox-frame{rnd}**" name="**fancybox-frame{rnd}**" class="fancybox-iframe" allowfullscreen allow="autoplay; fullscreen" src=""></iframe>',preload:!0

If I hack this part and change that ID and Name to simple YT API compatible "player", will there be a side effect as far as the rest of the code? I am fully aware that an update would erase that but I do not have any other option to use YT APIS for the time being.

[fancyapps]

Hi,

There are plans to completely rewrite the part that creates and controls video embeds, making it much easier to control videos regardless of the source. Currently, there is no such functionality.

As alternative, you could use Plyr or any other video player.