No Youtube video are displayed in AMP mode ?!

We should replace the Youtube script by this :

<script custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-latest.js" async=""></script>

<amp-youtube width="1070"
  height="602"
  layout="responsive"
  data-videoid="XXXXXX">
</amp-youtube>

I don’t know if we have to write a hook for that ?

I can see that the video is output in the non-AMP page as:

<div class="video-container"><iframe width="500" height="281" src="https://www.youtube.com/embed/iG12BqJLdp4?feature=oembed&wmode=opaque" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

The AMP plugin should be able to convert that to amp-iframe at least…

How is the video being embedded in the template in the first place? What is the underlying code? The ideal, yes, is to use an amp-youtube component from the start.

Can I use amp-youtube on a normal (non-amp) page ? Or perhaps the solution is to use the “classic theme” on AMP. Sometimes i’m a little sad about AMP, it’s really hard to manage on a website :/

No, using amp-youtube is not currently usable on non-AMP pages.

What is the underlying code you are working with for adding the video to the template?

I don’t really know – to be honest, when I’m posting a Youtube URL, wordpress automatically transform it into a Youtube embedded video.

In all AMP plugins, it works out of the box, even with the classic theme on the official AMP plugin, it works.

It’s just the Native and Paired function not “translating” the Youtube embedded codes.

I know I should change some code in the AMP plugins, but I don’t know where I need to modify the code.

For the moment, I will let the AMP page without videos.

Thank you for your answer ^^ !

If you’re just adding the video to the content as a URL in a paragraph (in other words, as an oEmbed) then it should indeed be automatically converted into an amp-youtube.

You shouldn’t have to change any code at all. It should be handled by https://github.com/ampproject/amp-wp/blob/develop/includes/embeds/class-amp-youtube-embed.php

Hello ?? It works now, in fact the validator wasnt working because of a conflict with an email plugin : Mailpoet.

It was doing that error :

[Mon Dec 17 05:04:03.634247 2018] [php7:error] [pid 14663:tid 139696401909504] [client 66.249.66.138:64585] PHP Fatal error: Uncaught Error: Call to undefined method Sabberworm\\CSS\\CSSList\\AtRuleBlockList), Array)\n#3

Now I just have to do a more little css stylesheet ans here we go ^^ !

Yes, the conflict with Mailpoet is a known issue. The fatal error will be fixed in 1.0.2, but some functionality will be limited: https://github.com/ampproject/amp-wp/pull/1743

I used the old method, modified the template to use the video instead of the pictures : amp/templates/featured-image.php

<?php
/**
 * Get the ID of a YouTube Video
**/ 
function helpwp_youtube_id($url){
	/*
	* type1: https://www.youtube.com/watch?v=9Jr6OtgiOIw
	* type2: https://www.youtube.com/watch?v=9Jr6OtgiOIw&feature=related
	* type3: https://youtu.be/9Jr6OtgiOIw
	*/
	$vid_id = "";
	$flag = false;
	if(isset($url) && !empty($url)){
		/*case1 and 2*/
		$parts = explode("?", $url);
		if(isset($parts) && !empty($parts) && is_array($parts) && count($parts)>1){
			$params = explode("&", $parts[1]);
			if(isset($params) && !empty($params) && is_array($params)){
				foreach($params as $param){
					$kv = explode("=", $param);
					if(isset($kv) && !empty($kv) && is_array($kv) && count($kv)>1){
						if($kv[0]=='v'){
							$vid_id = $kv[1];
							$flag = true;
							break;
						}
					}
				}
			}
		}
		
		/*case 3*/
		if(!$flag){
			$needle = "youtu.be/";
			$pos = null;
			$pos = strpos($url, $needle);
			if ($pos !== false) {
				$start = $pos + strlen($needle);
				$vid_id = substr($url, $start, 11);
				$flag = true;
			}
		}
	}
	return $vid_id;
}

$featured_image = $this->get( 'featured_image' );
?>

<?php $meta = get_post_custom($post->ID);
if ( has_post_format( 'video' ) ): // Video @fromfull ?>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

  	 <div class="post-format">
	<amp-youtube
      data-videoid="<?php if ( isset($meta['_video_url'][0]) && !empty($meta['_video_url'][0]) ) { $video_id = helpwp_youtube_id($meta['_video_url'][0]); echo $video_id;}?>"
      width="480"
      height="270"
      layout="responsive">
  	</amp-youtube>
    </div>
<?php else: 
	if ( empty( $featured_image ) ) {
		return;
	}

	$amp_html = $featured_image['amp_html'];
	$caption = $featured_image['caption'];
	?>
	<figure class="amp-wp-article-featured-image wp-caption">
		<?php echo $amp_html; // amphtml content; no kses ?>
		<?php if ( $caption ) : ?>
			<p class="wp-caption-text">
				<?php echo wp_kses_data( $caption ); ?>
			</p>
		<?php endif; ?>
	</figure>
<?php endif; ?>

Here is a URL example : https://otakugame.fr/2b-de-nier-automata-arrivera-le-18-decembre-dans-soulcalibur-vi/?amp

Thank you so much for your answer, now it’s just work ?? !
Credits for the ID from Youtube URL : https://helpwp.com/use-youtube-video-id-for-thumbnails-and-embed-in-wordpress/

And thank you for your fast answer ! It’s so hard to debug AMP, it’s a really big project and wordpress has so many plugins… Good Luck ^^ ! You guys are my super heroes !!!

• This reply was modified 6 years, 3 months ago by SuzuKube.
• This reply was modified 6 years, 3 months ago by SuzuKube.
• This reply was modified 6 years, 3 months ago by SuzuKube.