html5 fullscreen video onClick event

Question

Is there a way to make a image fire a fullscreen html5 video? Basically I have something like this:

           <div class="slide" id="">
               <img src="../root/img/gc_small.png" id="videoPlay" style="margin:200px 0 0 0;">
                <video autoplay loop muted controls="false" id="myVideo">
                    <source src="video/portal.mp4" type="video/mp4">
                </video>
            </div>

So I was thinking of hiding the #myVideo and adding a click event to #videoButton to take the video into full browser screen. Is this possible??

Have you tried the [fullscreen API](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode)? — aug, Dec 11 '14 at 04:48
Also, looking at your question again, is the purpose of this image to serve as a placeholder for the video? HTML5 gives [` — aug, Dec 11 '14 at 04:52

score 0 · Answer 1 · answered Dec 11 '14 at 05:04

0

$(function() {
    $(SELECTOR).on('click', function(event) {
        event.preventDefault();
        $(VIDEO SELECTOR).requestFullscreen();
    });
});

answered Dec 11 '14 at 05:04

Rafael

7,605
13
31
46

getting an error when I click with this `` – Packy Dec 11 '14 at 05:39
`Uncaught TypeError: undefined is not a function` – Packy Dec 11 '14 at 05:43
http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen – Rafael Dec 11 '14 at 05:50

score 0 · Answer 2 · answered Sep 27 '18 at 11:30

<video id="videoplay" controls="controls" autoplay="autoplay"> 
    <source src=small.mp4 type=video/mp4>
    <source src=small.3gp type=video/3gp>
    <source src=small.webm type=video/webm> 
    <source src=small.ogv type=video/ogg> 
</video>
<script type="text/javascript">
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.paused) {
if (myVideo.requestFullscreen) {
    myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
    myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
    myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
    myVideo.webkitRequestFullScreen();
}
myVideo.play();
}
else {
myVideo.pause();
}
}, false);
</script>

score -3 · Answer 3 · answered Dec 11 '14 at 04:51

-3

You can use jQuery. Something like:

$(function(){
 // Helper function to Fill and Center the HTML5 Video
 jQuery('video, object').maximage('maxcover');
});

answered Dec 11 '14 at 04:51

KaMZaTa

535
2
9
24

Well first off this isn't a legit jQuery function. This is from a plugin. Second this isn't very good practice. – aug Dec 11 '14 at 04:54

html5 fullscreen video onClick event

3 Answers3

Linked