(HTML) Не работает воспроизведение видео на некоторых устройствах

Question

Столкнулся с такой проблемой, что у меня все хорошо работает на странице, т.е воспроизводится видео. Но на некоторых устройствах не работают видео. Вот что происходит у одного человека в браузере (фото 1) В кружках должно быть видео, но его нет. В консоли тоже никаких ошибок нет.

HTML код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Web-site</title>
    <link rel="stylesheet" href="src/Components/Header/Header.css">
    <link rel="stylesheet" href="src/Components/Footer/Footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="src/Components/LittleComponents/Button/Button.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="App.css">
</head>
<body style="display: none">

<!-- We will put our React component inside this div. -->
<div class="index">
    <div id="root">
        <Header/>
    </div>
    <main id="swup" class="transition-fade">
    <div class="content">
        <a class="pricing-circle" href="pricing.html">
            <h1 class="pricing-text">Pricing</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="colocation-circle" href="Pricing.html">
            <h1 class="colocation-text">Colocation</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="parthners-circle" href="Pricing.html">
            <h1 class="parthners-text">Parthners</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="benefits-circle" href="FAQ.html">
            <h1 class="benefits-text">Benefits</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="protection-circle" href="Contact.html">
            <h1 class="protection-text">DDOS Protection</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="vdi-circle" href="FAQ.html">
            <h1 class="vdi-text">VDI</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="vps-circle" href="Pricing.html">
            <h1 class="vps-text">VPS/VDS</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
        <a class="infrastructure-circle" href="Service.html">
            <h1 class="infrastructure-text">Cloud infrastructure</h1>
            <div class="page-video">
                <video class="video" loop="loop" autoplay="" muted=""
                       poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv"/>
                    <source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm"/>
                </video>
            </div>
        </a>
    </div>
    </main>
</div>
<div id="footer">

</div>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- Load our React component. -->
<script src="./Components/Header/Header.js"></script>
<script src="./Components/Footer/Footer.js"></script>
<script src="./Components/LittleComponents/Button/Button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        let body = $("body");
        body.fadeIn(400);
        $(document).on("click", "a:not([href^='#']):not([href^='tel']):not([href^='mailto'])", function (e) {
            e.preventDefault();
            $("body").fadeOut(400);
            let self = this;
            setTimeout(function () {
                window.location.href = $(self).attr("href");
            }, 400);
        });
    });
</script>
<script src="index.js"></script>
<script>
    ReactDOM.render(React.createElement(Header, null), document.getElementById('root'));
    ReactDOM.render(React.createElement(Footer, null), document.getElementById('footer'));
</script>
<!-- <script src="./Components/LittleComponents/Button/Button.js"></script> -->

</body>
</html>
`

БЛОГ НА HUSL

(HTML) Не работает воспроизведение видео на некоторых устройствах

Ответы (0 шт):