How to enter to fullscreen mode when playing video using jquery

for my project i use the next code :

<!DOCTYPE html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>

    <script type='text/javascript' src=''></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

    <style type='text/css'>


    <script type='text/javascript'>//<![CDATA[
        var fullscreen = (function () {
            var methods = ["requestFullscreen", "mozRequestFullScreen", "webkitRequestFullscreen", "msRequestFullscreen"],
                    img = new Image,
                    method = methods.filter(function (m) {
                        return m in img
                    fun = function (e) {
                        lastElement = this
                        method && this[method]()
            fun.element = function () {
                return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement
            return fun

        function fsv() {
            $("#my_video").one("click", function (e) {
                if (this.paused) {
                    $(document).one("webkitfullscreenchange mozfullscreenchange MSFullscreenChange msfullscreenchange fullscreenchange", fsv)


<video id=my_video controls>
    <source src= type=video/webm>
    <source src= type=video/ogg>
    <source src= type=video/mp4>
    <source src= type=video/3gp>



if for any reason the link to the js file is missing here link to download:

but if anyone want here good example with many options in:

another example not for fullscreen just things you can do :

<body style="background-color: white"> 
<div id="dimMe" style="background-color:blue">
    <video id="video" autobuffer controls muted width=240 height=200>
        <source src="">
document.getElementById("video").addEventListener('play', dimBack, false);

function dimBack() {
    this.removeEventListener('play', dimBack, false);

another exsampe is fullscreen to video and picture :

This entry was posted in כללי and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s