Parameters in a YouTube URL are not transferred to the amp-youtube component

[pierlon]

Bug Description

The URL http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s contains the t fragment identifier that denotes the video should start at the 10s mark. When it is inserted via the YouTube block in a post, the fragment is kept as seen in the markup below:

<iframe title="Old Spice Pro-Strength Commercial - Neil Patrick Harris" width="580" height="435" src="https://www.youtube.com/embed/0zM3nApSvMg?start=10&amp;feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" data-origwidth="580" data-origheight="435" style="width: 580px; height: 435px;"></iframe>

The AMP component does not include this parameter, however:

<amp-youtube data-videoid="0zM3nApSvMg" layout="responsive" width="580" height="435" title="Old Spice Pro-Strength Commercial - Neil Patrick Harris" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-media-component i-amphtml-video-interface i-amphtml-layout" i-amphtml-layout="responsive" style="--loader-delay-offset:1ms !important;"><i-amphtml-sizer style="padding-top: 75%;"></i-amphtml-sizer><a placeholder="" href="http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s" class="amp-hidden"><amp-img src="https://i.ytimg.com/vi/0zM3nApSvMg/hqdefault.jpg" layout="fill" object-fit="cover" alt="Old Spice Pro-Strength Commercial - Neil Patrick Harris" class="amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="fill" i-amphtml-auto-lightbox-visited=""><noscript><img src="https://i.ytimg.com/vi/0zM3nApSvMg/hqdefault.jpg" alt="Old Spice Pro-Strength Commercial - Neil Patrick Harris"></noscript><img decoding="async" alt="Old Spice Pro-Strength Commercial - Neil Patrick Harris" src="https://i.ytimg.com/vi/0zM3nApSvMg/hqdefault.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content" style="object-fit: cover;"></amp-img></a><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/0zM3nApSvMg?enablejsapi=1&amp;amp=1&amp;playsinline=1" class="i-amphtml-fill-content" allow="autoplay;"></iframe></amp-youtube>

The seek time is not transferred over to the AMP component and so it differs from the non-AMP variant.

Expected Behaviour

The YouTube AMP component should support parameters from the original YouTube embed.

Steps to reproduce

1. Insert a YouTube block with the following URL: http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s

2. Visit the non-AMP page and verify the video starts at the 10s mark

3. Visit the AMP page and verify the video does not start at the 10s mark

Screenshots

Additional context

• WordPress version:
• Plugin version:
• Gutenberg plugin version (if applicable):
• AMP plugin template mode:
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

This may make sense to work on in conjunction with this Jetpack issue: Automattic/jetpack#16946

I think that Jetpack is incorrectly serving an iframe when it should be serving an amp-youtube element, but it may be serving an iframe currently because we're not correctly transforming non-singular videos like playlists.

[westonruter]

In fact, there's probably a lot of conversion code that we can scrape from Jetpack to improve our handling of raw embed conversions: https://github.com/Automattic/jetpack/blob/master/modules/shortcodes/youtube.php

[delawski]

QA Passed

✅ The YouTube video starts at the specified time mark (10s) on AMP and non-AMP version.

Tested on AMP Version 2.2.0-alpha-20211123T020732Z-5405daa