I have a google AMP validation error, please check the screenshot: https://prnt.sc/26ne7co
It says the poster attribute is required in <amp-video tag. can you please check?
Thanks.
]]>the_content = preg_replace (‘/ <video (. *?)> / I’,'<amp-video layout = “responsive” $ 1> </ amp-video>’, $ the_content);
$ the_content = preg_replace (‘/ <video (. *?) \ /> / i’,'<amp-video layout = “responsive” $ 1> </ amp-video>’, $ the_content);
————————————————– ————————————————– ――――
<amp-video layout = “responsive” id = “video_kgvid_6” controls = “” preload = “none” poster = “https://womandream.jp/wp-content/uploads/2021/12/MXGS-581_thumb1.jpg” width = “640” height = “360” class = “fitvidsignore video-js kg-video-js-skin”> </ amp-video>
<source src = “https://womandream.jp/wp-content/uploads/2021/11/MXGS-581.mp4?id=6” type = “video / mp4” data-res = “288p”>
.
</ div>
——————————————-
If a person is using Videopack, it will be converted like this, but the parent tag of the “tag” source “is” div “, but only” picture “can be used. I got the error message from Google.
Does anyone know how to convert for Videopack?
]]>I recently created an article that contains 2 embedded YouTube videos and it is causing a problem in the AMP version.
The title is what appears in my Google Search Console.
The video that is not reflected in the AMP version is the last one that appears in the article, the previous one apparently has no problems.
Both videos use the same embed tag, so I don’t understand why this issue occurs …
I leave below the code that is used to embed the video, in case it helps.
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
[Here I enter the URL of the Video]
</div></figure>
In the AMP version, the videos are shown, but apparently the URL changes because it does not match the Non-AMP version …
]]>If I create a video block, add a link to the mp4, and select to have the block to “Wide Width” or “Full Width”, and no matter what type of AMP layout I select I can’t make the video fill in the width of the element, because it is forced to 400px height. This does not happen for example for a Vimeo Embed.
If I select a “responsive” AMP Layout, the video doesn’t appear at all.
As an example, for a default Video Block with a link set to “Wide Width” and “Default” AMP Layout, I get this code:
<figure class="wp-block-video alignwide">
<amp-video autoplay="" loop="" muted="" preload="auto" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" height="400" layout="fixed-height" width="auto" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-element i-amphtml-media-component i-amphtml-video-interface i-amphtml-layout" style="height:400px;" i-amphtml-layout="fixed-height">
<a href="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" fallback="">https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4</a>
<noscript>
<video autoplay loop muted preload="auto" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" playsinline></video>
</noscript>
<video playsinline="" webkit-playsinline="" preload="auto" class="i-amphtml-fill-content i-amphtml-replaced-content" loop="" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"></video>
<i-amphtml-video-icon class="amp-video-eq amp-video-eq-play">
<div class="amp-video-eq-col">
<div class="amp-video-eq-filler amp-video-eq-1-1"></div>
<div class="amp-video-eq-filler amp-video-eq-1-2"></div>
</div>
<div class="amp-video-eq-col">
<div class="amp-video-eq-filler amp-video-eq-2-1"></div>
<div class="amp-video-eq-filler amp-video-eq-2-2"></div>
</div>
<div class="amp-video-eq-col">
<div class="amp-video-eq-filler amp-video-eq-3-1"></div>
<div class="amp-video-eq-filler amp-video-eq-3-2"></div>
</div>
<div class="amp-video-eq-col">
<div class="amp-video-eq-filler amp-video-eq-4-1"></div>
<div class="amp-video-eq-filler amp-video-eq-4-2"></div>
</div>
</i-amphtml-video-icon>
</amp-video>
</figure>
With the container having max-width: 100%; height: 400px
and the video being positioned to fill in the space using position: absolute; top: 0; bottom: 0; left: 0; right: 0
The problem is that some videos have a smaller height and some have a larger height.
Changing the AMP Layout to “responsive” makes the video completely disappear.
The problem is easily fixable when I convert the block to HTML and manually add the height and the width of the video and set the AMP Layout to responsive – it becomes responsive.
I would have expected that at least after placing a poster for the video, the problem to be solved (get the dimensions from the poster) or at least let me manually change them in the Block Settings instead of converting the block to HTML and losing the preview for it.
I’m running the Twenty Twenty Theme with the AMP plugin installed.
]]>The attribute “playsinline” can not be used with the tag “amp-video” today from the Google Search Console. I received a notification of the error.
After checking the amp html, the attribute “playsinline” is described after the “amp-video” tag, and I would like to make settings to remove this.
I could not find any items that could be modified other than the “Featured Video / Audio Meta Key” item in the Layout Settings of the plug-in.
Please let me know if you have any suggestions, tips or tips on how to resolve the error. Thank you.
]]>I am running into an issue when trying to add videos for both youtube and iframe within my amp pages.
I loaded both amp components, however, it seems I need to write some sort of conditional statement to display amp on mobile or the regular iframe on desktop?
Do you have any examples of how to achieve this since when I add the amp video code it doesnt display on desktop and vise versa. Thank you so much for you help!
]]>the videos are not showing,I’m getting an error using validator.ampproject with the output:
“The tag ‘amp’ is disallowed.”
digging to the code I can see in the post
https://www.youtube.com/watch?v=xxxxxx
was render to
<amp data-videoid=”xxxxx” layout=”responsive” width=”1000″ height=”563″></amp>
and not using the youtube amp tag <amp-youtube>
in fact I inspected the page and replace <amp> tag for <amp-youtube> in the DOM and it works in the validators and it shows the video..it’s the only thing the I need
How can I replace that tag ?
I haven’t seen anything on the setting where I can deal with it, I don’t know if this is a bug or something that can be fix on the settings
Cheers
]]>I’m just trying the free version of your plugin and I’m really impressed by the good work you have achieved, however, I need support for AMP, and currently using the Automattic plugin.
Since we are just testing things out, currently the plugin is used to substitute the featured image in just one post (the one I’m linking to), but as the plugin is outputting regular html, it doesn’t work really on an AMP page.
So, I made a quick hack, putting the gist of a valid video insertion with AMP, and it works, I’m sharing this suggesting it would be a nice feature having native compatibility with AMP.
At the end of the static filter_thumbnail_html
, instead of passing to cvwp_video_output
the obscure arguments it receives, I’ve just the valid AMP tags:
<amp-youtube data-videoid="aV-XEnruDI0" layout="responsive" width="620" height="349"><amp-img src="https://i.ytimg.com/vi/aV-XEnruDI0/sddefault.jpg#404_is_fine" placeholder layout="fill"></amp-youtube>
I bet this is something your plugin could achieve in a better way, since I’ve found the ID of the video, the type and the image placeholder in the meta_key _cvwp_video_settings
I use a <video>
tag on the comment of the post.
When I replaced this tag, I mean <video src="/wp-content/uploads/2016_03_30_1445.mp4" controls="" class="alignleft"></video>
, with the blelow, the error has gone.
<amp-video controls
width="640"
height="360"
layout="responsive"
<source src="/wp-content/uploads/2016_03_30_1445.mp4"
type="video/mp4" />
</amp-video>
But the video on non-AMP page disappears. How can I fix this on both AMP and non-AMP page?
]]>