Как настроить полноэкранный видеоплеер iframe в мобильном браузере Chrome?
Я недавно отвечаю за ведение видео сайта. На сайте используется Fluid Player, встроенный в iframe в качестве видеоплеера. И это может нормально полный экран на ПК Chrome. Но в мобильном Chrome основной видеоконтент не заполняет весь плеер после нажатия кнопки полного экрана. И пользователю нужно потратить дополнительное время на настройку автоматического горизонтального экрана телефона для достижения нормального полноэкранного режима.
Мой вопрос заключается в том, как настроить видео-контент, как обычно, вращаться (во весь экран) после того, как пользователь нажимает кнопку полноэкранного проигрывателя в мобильном (например, Android) Chrome.
Я пробовал много видео проигрывателей с открытым исходным кодом, но ни один из них не работает так хорошо, как мобильный сайт Youtube.
Ниже приведен пример разметки страницы с вышеупомянутым iframe и страницей iframe видеопроигрывателя.
<iframe src="example.com/video-player?videoId=123"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"></iframe><link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
<video id="video-id">
<source src="video.mp4" type="video/mp4"/>
</video>
<script>
fluidPlayer("video-id");
</script>
-
- нажмите здесь, чтобы увидеть неожиданный полноэкранный скриншот
нажмите здесь, чтобы увидеть неожиданный полноэкранный режим