CODEWITHSUNDEEP
javascriptjqueryhtml
Red
Red

Reputation: 75

How to make video fullscreen with double click

I am building a project where I need the video in the website to play automatically, when the user clicks on the video, it pauses the video and a pause logo would come up over the video. and when the user double clicks the video, it would expand to full screen. i was able to get the first two parts but failed when it comes to making the video expand to full screen when it is double clicked. And i have no idea what went wrong..

js

var elem = document.getElementsByClassName("video");

$( document ).ready(function() {
    $(".playpause").fadeOut(); <!-- makes the play button fade out when autoplay starts when the website finished loading -->
});


$('.video').parent().click(function () {
  if($(this).children(".video").get(0).paused) {
    $(this).children(".video").get(0).play();
    $(this).children(".playpause").fadeOut();
  } else {
      $(this).children(".video").get(0).pause();
      $(this).children(".playpause").fadeIn();
  }
});

$(".video").dblclick(function() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { 
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { 
    elem.msRequestFullscreen();
  }
});

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrapper">
    <center><p>Introduction Video</p></center>
    <video class="video" autoplay>
      <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

Thanks!

Upvotes: 3

Views: 3374

Answers (2)

Addis
Addis

Reputation: 2530

getElementsByClassName returns a collection but you are treating the returned node list as a single element. So your options are either assign the element at index 0 or choose a selector that returns a single element.

var elem = document.getElementsByClassName("video")[0];

or:

var elem = document.querySelector('.video');

Or even better you may use the this keyword which returns the target element and avoid using elem all together.

$(".video").dblclick(function() {
  if (this.requestFullscreen) {
    this.requestFullscreen();
  } 
  else if (this.mozRequestFullScreen) { 
    this.mozRequestFullScreen();
  } 
  else if (this.webkitRequestFullscreen) { 
    this.webkitRequestFullscreen();
  } 
  else if (this.msRequestFullscreen) { 
    this.msRequestFullscreen();
  }
});

Upvotes: 3

Amit
Amit

Reputation: 1919

Try this way 

// Create fullscreen video button
function toggleFullscreen() {
 if (!document.webkitFullscreenElement) {
  if (video.requestFullScreen) {
   player.requestFullScreen();
  } else if (video.webkitRequestFullScreen) {
   player.webkitRequestFullScreen();
  } else if (video.mozRequestFullScreen) {
   player.mozRequestFullScreen();
  }
 } else {
  document.webkitExitFullscreen();
 }
}

video.addEventListener("dblclick", toggleFullscreen);

example : https://codepen.io/Amaan4101/pen/pooaqxe

Upvotes: 1

Related Questions