При клике на видео увеличить на весь экран

Question

Всем привет! Нужна ваша помощь.

Сделал воспроизведение видео при наведении, а теперь нужно что бы при клике на видео оно увеличилось на весь экран. Подскажите пожалуйста как это можно сделать !?!?

$("body").on("mouseover", "video", function() {
  this.play();
  $(this).css("background-color", "black");
});
$("body").on("mouseleave", "video", function() {
  this.pause();
})

<video>
  <source src="video/fortnite.mp4" type="video/mp4">
</video>

Answer 1

    $("body").on("mouseover", "video", function() {
        this.play();
        $(this).css("background-color", "black");
    });
    $("body").on("mouseleave", "video", function() {
        this.pause();
    })
    $('#vid').on('click', function () {
        $('#vid').attr("width", "100%");
        $('#vid').attr("height", "100%");
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<video id="vid">
    <source src="https://www.youtube.com/results?search_query=avalon+my+dicky+is+bigger+yours" type="video/mp4">
</video>
</body>

Answer 2

Если нужно включать нативный полноэкранный режим (показывать видео на всесь экран, скрывая все элементы системы), то можно воспользоваться функцией requestFullscreen (пример, документация/поддерживаемые браузеры):

$('video').on('click', function () {
    this.requestFullscreen();
});

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

БЛОГ НА HUSL

При клике на видео увеличить на весь экран

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