HTML5 video - onclick play to fullscreen

Question

I have a simple HTML5 video player. I would like it so when the user clicks a div on the site, this then opens the video up to fullscreen.

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <div class="top-video">
        <video controls="" muted="" autoplay="" playsinline="" id="topVideo">
          <source src="https://player.vimeo.com/external/419906207.hd.mp4?s=7c6f9edf7137540923b2931ac0359420124e5d6e&profile_id=174&amp;loop=0&amp;autoplay=1" type="video/mp4">
        </video>
    </div>

I have tried using jQuery to target this but cannot, does anyone have a solution?

check with this https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API — Purushoth.Kesav, May 19 '20 at 08:44
Does this answer your question? [Html5 Full screen video](https://stackoverflow.com/questions/6039909/html5-full-screen-video) — לבני מלכה, May 19 '20 at 08:45

score 2 · Answer 1 · answered May 19 '20 at 09:05

2

According to the MDN documentation, an Element.requestFullscreen() could help you with that

$('#div-you-need-to-click').click((e) => {
  $('#topVideo')[0].requestFullscreen();
})

answered May 19 '20 at 09:05

twerk kid

76
3

HTML5 video - onclick play to fullscreen

1 Answers1