Okay
  Public Ticket #1107204
Youtube API
Closed

Comments

  •  2
    Hugogon started the conversation

    Is there a way to control a youtube video with the iframe API or other?

    I'm trying to start the video mute and have a button to change the volume. Also trying to pause the video with a play/pause button.

    Is this possible?

    Thank you

  • [deleted] replied

    Hey Hugogon,

    Unfortunately at the moment there is no built-in option in the plugin to achieve this.

    But in case you are familiar with custom coding you could use the YouTube iframe API, either separately loaded, or through the slider. If you load it through the slider you can find the "player object" in any media layer by calling the .data() jQuery function.

  •  2
    Hugogon replied

    Hi Attila!

    Thank you for your feedback. Unfortunately this is easier said than done.
    Been pulling my hair out on this one for the last few days, to little or no result.

    Here's the breakdown:

    Once i put the iframe embed code, you somehow detect the iframe and youtube url and spit out the iframe_api script from youtube and the onYouTubeIframeAPIReady, along with the onReady event and the onStateChange event (not sure).

    The thing is, that, the API doesn't return any of these events callbacks (at least to my knowledge) and since you have what it looks like a restricted function i can't sink my teeth on those events callbacks (mostly the youtube state changes that i need). The only globals that returns to me is youTubeIsReady, which is insufficient.

    Also went down the custom road, added a div that i used to inject the youtube iframe API code.
    All works fine except for, the LayerSlider integration.
    Now LS doesn't know there's a youtube video in there (well it knows, it just doesn't recognize the player var) and when you try to move from a youtube slide, it's supposed to stop the video but understandably, throw's this error: Uncaught TypeError: Cannot read property 'player' of undefined.
    There's always the chance to hide your navigation and use a custom one. But in the end it seems that there are too many gaps to fill just for something that should be straightforward.

    My concern is, am i missing something in your API, that returns the youtube state changes, and allows control of video to stop, and control volume. Or there isn't any and i should recreate the youtube embed along with the LS navigation to bypass the errors.

    Thank you again.
    Hugo Gonçalves

  • [deleted] replied

    Hey Hugo,

    I'd recommend to do it the following way. Give an ID to the video layer (NOT for the embed iframe, but for the layer itself under the Link & Attributes tab). By referring to this ID, you can access the player with the following command: jQuery( '#customID' ).data( '_LS' ).mediaProperties.player

  •  2
    Hugogon replied

    Hey Attila!

    Thank you, both for the quick reply and the info.
    It worked like a charm, mate!

    Cheers
    Hugo