Html5 Fullscreen Video Onclick Event

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

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

Solution 2:

<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>

Solution 3:

You can use jQuery. Something like:

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

Share