Amphtml: amp-youtube: Unable to get video to loop with data-param-loop=1

[westonruter]

Given an amp-youtube element which includes data-param-loop=1:

<amp-youtube
    width="1024"
    height="768"
    layout="responsive"
    autoplay
    data-videoid="qbGbDNYArTU"
    data-param-loop="1"
    data-param-rel="0"
    data-param-showinfo="0"
    data-param-controls="0"
    data-param-iv_load_policy="3"
    data-param-modestbranding="1"
    data-param-playsinline="1"
    data-param-disablekb="1"
    data-param-fs="0"
></amp-youtube>

I would expect the video to loop, but it does not.

While amp-youtube supports an autoplay attribute, it does not support a loop one (like amp-video). Nevertheless, passing a custom param (e.g. loop) to the player is supposed to work:

The YouTube player API docs for the loop param:

This indicates an iframe may need to supply an additional playlist param that matches the video ID, but this does not work.

The context for this is adding AMP support for the video header feature in the WordPress plugin: https://github.com/ampproject/amp-wp/pull/2642

[westonruter]

/cc @wassgha

[wassgha]

Can you confirm that adding the data-param-playlist="qbGbDNYArTU" doesn't work? I just tried it and it works for me. I can definitely make a PR that automatically adds the playlist param when a loop param is specified but this seems like a developer-side issue rather than an AMP problem. @aghassemi for input

[westonruter]

@wassgha You're right! I thought I had done that and it didn't work, but trying it again I see that it does. 😊

[westonruter]

@wassgha Nevertheless, even though the amp-youtube _does_ loop with this approach, it does not loop smoothly. Compare the non-AMP YouTube looping with the amp-youtube looping in this screencast: https://youtu.be/8PZGJf3dtwM

Notice how the bottom browser window (with the AMP page) momentarily goes black after running the video and it returns to the next, while the top browser window (the non-AMP version) smoothly and continuously loops the video.

Is this out of scope for the AMP component?

[wassgha]

Can you please include the code for the non-amp YouTube player?

[westonruter]

Yes, the non-AMP video header code is coming from WordPress core: https://github.com/WordPress/wordpress-develop/blob/5e2672838780035b7cdb7ed451d3d915d6661f61/src/js/_enqueues/wp/custom-header.js#L376-L420

[wassgha]

I see! It seems like the Wordpress code handles the looping through the JS API

onStateChange: function( e ) {
    if ( YT.PlayerState.PLAYING === e.data ) {
        handler.trigger( 'play' );
    } else if ( YT.PlayerState.PAUSED === e.data ) {
        handler.trigger( 'pause' );
    } else if ( YT.PlayerState.ENDED === e.data ) {
        e.target.playVideo(); /* <--- here */
    }
}

which gives a smoother transition compared to the native Youtube approach which creates a playlist of two identical videos and loops it. I think we can intercept the loop parameter and use the JS API trick too if this is important for your use case.

[westonruter]

That would be great as it would give a 1:1 functional parity between the non-AMP and AMP version of the page, which is important for adoption.

[westonruter]

@wassgha I'm noticing something unexpected where the title of the video flashes momentarily when the video loops. For example, try this:

<amp-youtube width="2000" height="1200" layout="responsive" autoplay loop data-videoid="qbGbDNYArTU" data-param-rel="0" data-param-showinfo="0" data-param-controls="0" data-param-iv_load_policy="3" data-param-modestbranding="1" data-param-playsinline="1" data-param-disablekb="1" data-param-fs="0"></amp-youtube>

[wassgha]

@westonruter Could you please confirm that this is different from the behavior on Wordpress? I'm seeing this on Wordpress: https://youtu.be/_UT9UfuL-a8

[westonruter]

@wassgha sorry for the delay and you're right, I see the flash of the video title appears momentarily on the non-AMP version as well. I didn't see it before because the top/bottom of the video was obscured from view. Sorry for the false alarm.

You've replicated the functionality _exactly_. Thank you 😄