<video> not replacing to <amp-video> in amp

Hello ghost bloggers,
I have a video blog platform built with ghost and i love this thing it’s like lightspeed but i have a problem in posts.
If i put this code :arrow_down::arrow_down::arrow_down: in my post with a html card this goes not output in amp to <amp-video> but tags like <iframe> and <img> working nicely. I don’t know it’s a bug or something wrong in my code but i really need this to change in amp because i used html5 default player sources.
Do you guys have this same problem or anyone have any idea for solution?

  • I’m currently using the last version of ghost btw

Hey there. That’s an interesting case. We can’t anticipate what will be entered into a HTML card so it’s hard to distinguish a video element and mp4 url so it can be turned into an amp-video component. You might be able to do something with the amp.hbs template though, we’ve got documentation on how it works and ways to edit it https://docs.ghost.org/api/handlebars-themes/google-amp/

1 Like

If i put a code to markdown or simply paste it to editor the code not also transform to a <amp-video> too.
And i looked at docs 1 week but there is no way to transform code helper or attribute. Maybe it will solved to next releases?

I’m not sure what you mean? Have you tried using the YouTube video card instead? This may play more nicely with AMP.

The other option is that you could implement the amp-video component to work on the non-amp view. That way it would work for both without having to transform it into a different video component. AMP has some docs here on how to implement their video component https://amp.dev/documentation/examples/components/amp-video/

1 Like

My boss only wants to <video> codes to share posts not want to upload youtube or anywhere.
If i put this code in html card it works but google and other sites shows copied content and html errors.
<video controls width="100%" height="480" poster="/xx.jpg">
<source src="xx.mp4" type="video/mp4">
</video>
<amp-video controls width="640" height="480" poster="/xx.jpg">
<source src="xx.mp4" type="video/mp4">
</amp-video>

Please check out the link I provided, it shows how to add an amp-video component into the page so it’ll work on both regular web pages as well as AMP pages

Sorry but u totally can’t understand me if i want to put <video> and <amp-video> codes in the same time i will do it but even i told you there is a HTML and search engine errors so basically I’m basically want to replace <video> to <amp-video> that’s simple if you have any idea please reply

I totally understand your issue, and I’ve provided you with a few alternatives which you could try. If you were to check the link I posted you’ll see that you can actually make an amp-video component work exactly like a regular video element meaning you wouldn’t have to convert the component. I don’t know what errors you are getting but you wouldn’t get them if you use the code correctly