There is a strange circular shape that keeps appearing on certain websites (image below) when viewed on an iPhone using Safari. Upon inspecting the Safari console, it seems to be related to the autoplay feature of a video, but unfortunately, I have been unable to remove it.
So far, I have attempted the following (with no success):
1- remove the controls tag
2-
video::-webkit-media-controls { display:none !important; }Thank you in advance for any help or suggestions.
https://i.sstatic.net/DP1bJ.png
This is a snippet of the code that might be causing the issue:
<div style="position: relative;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-image: none; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;">
<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; width: 855px; height: auto;"><source src="video_5.mp4" type="video/mp4"></video>
</div>
</div>