I'm making a website that uses videos, with the VIDEO label; I've tried it on PCs, iPads, iPhones and Android and Windows phones. In all it is shown correctly, less in iPhone (iOS 10); showing the poster image with a 'play' crossed out.
The code is as follows:
<video id="myVideo" poster="img/portada.jpg" autoplay="autoplay" loop muted>
<source src="video/portada.webm" type="video/webm" />
<source src="video/portada.mp4" type="video/mp4" />
</video>
In some places I have seen that it can be a problem of codecs in old iPhone, but this in an iPhone 7; even so I have tried to regenerate the video with other codecs and the same thing is happening.
However, the idea of this website is that when accessing from a mobile phone it does not show videos but images (the one indicated in the 'poster' parameter), so that in jQuery I detect the screen size and if it is smaller of a certain size I eliminate the source of the video, like this:
var video = document.getElementById('myVideo');
video.pause();
video.src = "";
Doing this works for me on all the devices mentioned, except for iPhones (that is, if you change the video by the poster image, but you add the crossed out logo, which is what I need not to leave .)
Why can it be ?; Can you do it more elegant ?
Thank you very much