Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #765107

    I need to create a website, where user is redirected to a new page when Youtube video is finished. However, it seems that the Youtube event listeners are not working with Enfold theme.

    For example, I have tried to import the example code from Youtube iFrame Player API (https://developers.google.com/youtube/iframe_api_reference#Examples > Example #1) to a Enfold page and it doesn’t work. I have tried code block and text block and not using advanced layout editor at all. If I change theme to some WP default theme (Twenty Sixteen etc), the code and event listeners work just fine. The only modification I’ve done to those themes is these to the functions.php:
    remove_filter( ‘the_content’, ‘wpautop’ );
    remove_filter( ‘the_excerpt’, ‘wpautop’ );

    … I have tried to do the same for Enfold, but it hasn’t been working. I send you a link to a demo page, where the that example code is used.

    #765235

    Hey teme!

    The player that is been used is not the iframe, but replaced, so that is why the video is not been targeted properly on the example.

    Best regards,
    Basilis

    #765251

    Sorry, but I don’t quite understand your reply. If the code is wrong, why the exactly same code works when I’m using a basic WP theme? If there is a way to do this, could you please explain how I can get those Youtube event listeners to work in a page which is using Enfold theme?

    I now changed the demo theme to Twenty Fourteen and the video & event listeners began to work correctly (same url as before).

    • This reply was modified 7 years, 8 months ago by teme.
    #765378

    I tried another example, which works fine with Twenty Fourteen theme, but when I put the code to Enfold Code Block, it displays nothing:

    <!– 1. The <iframe> (and video player) will replace this <div> tag. –>
    <div id=”player”></div>

    <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement(‘script’);

    tag.src = “https://www.youtube.com/iframe_api&#8221;;
    var firstScriptTag = document.getElementsByTagName(‘script’)[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    // after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() { player = new YT.Player(‘player’, {
    height: ‘390’,
    width: ‘640’,
    videoId: ‘M7lc1UVf-VE’,
    events: {
    ‘onReady’: onPlayerReady,
    ‘onStateChange’: onPlayerStateChange
    }
    });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
    event.target.playVideo();
    }

    // 5. The API calls this function when the player’s state changes.
    var done = false;
    function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
    window.location.href = ‘http://www.google.com&#8217;;
    }
    }
    function stopVideo() {
    player.stopVideo();
    }
    </script>

    • This reply was modified 7 years, 8 months ago by teme.
    #766681

    Hi teme,

    I watched the demo, the border color is changing, which means video events are registered and are handled.
    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #767416

    Yes, as I said before: I now changed the demo theme to Twenty Fourteen and the video & event listeners began to work correctly (same url as before). So currently Enfold theme isn’t in use, but when I activate it, the code doesn’t work anymore. The admin access is in the private content box.

    #767619

    Hi teme,

    Here is the difference, above is regular theme – div#player gets targeted, with Enfold – iframe gets targeted not the div.

    You can try using this way of embedding the video and see if the right element gets targeted.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #767620

    Hi teme,

    Here is the difference, above is regular theme – div#player gets targeted, with Enfold – iframe gets targeted not the div.

    You can try using this way of embedding the video and see if the right element gets targeted.

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.