transition between pages always shows blurry image on smartphone

Hello @denjones and thanks for getting in touch. Could I just confirm that it is only on mobile that you are seeing this occur? If so could you confirm what mobile device you are using when testing this.

Could you also provide some further information on this so we can help assist with this:

1. Your Site Health information using this form.
2. Is it when using any other video or just the video here: https://focused-wozniak.95-111-231-116.plesk.page/index.php/web-stories/transitions-white/ or with any video?
3. Do you get the same issue if you change the video size i.e. make it smaller on the page?

Yes the bad transitions only happen on mobile phones.
I tested it on 2 iPhones: Xs and 13pro

1. Done
2. With any video. It seems it has to do with the way the html code is generated by the web-stories plugin. I added the html generated with the other web story creator on my hosting and in this case the transition works fine: https://focused-wozniak.95-111-231-116.plesk.page/test-video-transition.html . So in my opinion it has nothing to do with the server, but with the source code. Can you maybe see what code they use to make better transitions?
3. Yes, I get the same issue: https://focused-wozniak.95-111-231-116.plesk.page/index.php/web-stories/test-transition-small/

@denjones thanks for providing the information. When viewing https://focused-wozniak.95-111-231-116.plesk.page/test-video-transition.html on an iPhone Xs and 13 pro device I still don’t get any blur when transitioning from page 1 video to page 2 video.

Is it possible for you to capture a screenshot of what this looks like on your screen and share it with us via Google Drive or a service such as Imgur.

Which browser are you using on your device?

Here you can see a video of what I mean with the bad transitions: https://focused-wozniak.95-111-231-116.plesk.page/wp-content/uploads/2022/01/Automatic-63.mp4

It only happens the first time and when you refresh the page.

@denjones thanks for the video that’s helpful. Are you able to fix this url https://focused-wozniak.95-111-231-116.plesk.page/invisible-transition so that we can compare with others we have from you and investigate further.

I found the problem!
It has everything to do with the poster tag. If the video in the background contains a poster tag, that image (made blurry) is shown for a few milliseconds during the transition from one page to the next. If there is no poster tag, the poster-image doesn’t get loaded and that’s why the transition is fluently in that case…

– with poster tag: https://focused-wozniak.95-111-231-116.plesk.page/external-videos-poster.html
– without poster and artwork tag: https://focused-wozniak.95-111-231-116.plesk.page/external-videos-no-poster.html

<amp-video autoPlay="autoplay" poster="https://storage.coverr.co/p/ZbtbfyqRyAMzBVE67qR5Gjl6uJwQBKZb" artwork="https://storage.coverr.co/p/ZbtbfyqRyAMzBVE67qR5Gjl6uJwQBKZb" title="Still shot of a bird walking on an empty beach." alt="Still shot of a bird walking on an empty beach." layout="fill" noaudio="noaudio" id="el-ef48f62f-7f25-4fc1-b743-eef328d3431f-media">
										<source type="video/mp4" src="https://storage.coverr.co/videos/ZbtbfyqRyAMzBVE67qR5Gjl6uJwQBKZb?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjEyNjFDMkM5QUYxNEY5NkJDRTc2IiwiaWF0IjoxNjQzNTM1MDA4fQ.z5EEgnmgtjiMKPZ7NiMaPxlT0AEDPftCLLvEyHMOM1w" />
									</amp-video>

Is this poster image mandatory? Why is it used? Can I remove it?

@denjones Thanks for raising this. I have filed an improvement request with the amphtml team for this which you can follow for updates here: https://github.com/ampproject/amphtml/issues/37526.

Unfortunately I have no timeframe on when this will be improved so would advise following this issue.

Okay, thank you!

Any idea why this poster image is necessary?
Can I just remove it in the source code?

The poster image is necessary for user experience and accessibility reasons.

If you remove it, your story will be considered invalid AMP and thus not eligible to appear in dedicated areas on Google Search and Google Discover.

So you should really not remove it.