CODEWITHSUNDEEP
javascripthtml
Vika
Vika

Reputation: 429

HTML click button full screen

I am trying to inject my JS code in order to click the "fullscreen" button for this html video - http://techslides.com/demos/sample-videos/small.webm

Problem is, I don't know the function to call full screen. What is it called?

function fullScreenClick() {         
  var video = document.getElementsByTagName('video');     
  video[0].play();
}  

fullScreenClick();

Upvotes: 0

Views: 2730

Answers (4)

Shayan Faghani
Shayan Faghani

Reputation: 240

You can do this simply by using the onClick function of the video element. First, you need to wrap your video inside the video tag. I have added the code so you can better see the example:

$('#video').click(function(){this.paused?this.play():this.pause();});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video"><source src="http://techslides.com/demos/sample-videos/small.webm"></video>

Or you can simply add the inline function into your HTML onclick tag.

Upvotes: 0

Eklavya Jain
Eklavya Jain

Reputation: 47

For that just type in video.style.width = '100%'; and video.style.height = '100%'

Like this:

function fullScreenClick() {         
var video = document.getElementsByTagName('video');     
video[0].play();
video.style.width = '100%';
video.style.height = '100%';
}  

fullScreenClick();

Upvotes: 0

Jello
Jello

Reputation: 414

It's element.requestFullscreen().

function fullScreenClick() {         
  var video = document.getElementsByTagName('video')[0];
  video.requestFullscreen();
}  

fullScreenClick();

To support IE and Safari, you might need to use webkitRequestFullscreen or msRequestFullscreen.

Check the document here or here.

Upvotes: 1

Qerqie
Qerqie

Reputation: 3

Try this :

<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Upvotes: 0

Related Questions