Граница появляется вокруг выделенного элемента mediaelement.js (2.16.4)

Я вижу, как появляется граница вокруг видео- и аудиоэлементов MediaElement.js при воспроизведении видео / аудио (и, в некоторых случаях, граница не исчезает при удалении фокуса, но в настоящее время это менее серьезная проблема). Я вижу проблему в Safari, Chrome и Firefox- не так много в IE по любой причине. Проблема появляется в коде, который я включил ниже, но она НЕ появляется на домашней странице MediaElement.js:

http://mediaelementjs.com/

Я предполагаю, что это означает, что это CSS-вещь, но я озадачен, почему он не будет частью CSS-оболочки MEJS по умолчанию. Надеюсь, я просто делаю глупости. Помогите?

<!doctype html>


<head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">      
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <link  href="mediaelement-2.16.4/mediaelementplayer.css" rel="stylesheet">
    <script src="mediaelement-2.16.4/mediaelement-and-player.min.js"></script>
    <script>
        jQuery(document).ready(function() {
            jQuery('video,audio').mediaelementplayer();
        });
    </script>       
</head>
<body>
    <video src="sample.mp4" poster="mountain.jpg" width="640" height="264"></video>
    <hr>
    <audio src="sample.mp3" preload="auto">
</body>

Источник

1 ответ

Решение

Правильно, так что я разобрался (смущенно наклонил голову).

Сайт MediaElement использует сброс CSS, который включает в себя следующую строку:

: focus {outline: 0; }

... что, очевидно, снимает фокус. Несколько странно, что теперь, когда я об этом думаю, эта строка не является частью CSS MediaElement. Я не могу представить, чтобы кто-то когда-либо хотел такого поведения...

Источник
Другие вопросы по тегам