<style>

#videoelem { width: 100%; height: 100%; position: absolute; } 

#videocontainer { position: relative; width: 400px; height:230px;-webkit-user-select:none; -webkit-transition-duration:0.2s}

.videobutton { 

    line-height: 40pt;

    border: 3px solid white; 

    -webkit-border-radius: 20px;

    opacity: 0.5;

    position: absolute;

    font-size: 40pt;

    color: white;

    background-color: gray;

    cursor: pointer;

    text-align: center; 

    z-index: 1;

}

.videozoombutton { bottom:10px;right:10px;width:1.1em;height:1.1em;font-size:15pt; line-height: 15pt; border:2px solid white; -webkit-border-radius: 8px;}

.videoloading { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 7em; height: 1.2em; cursor:default;}

.videofadeout { -webkit-transition: 1.5s; opacity:0; }

#videocontainer:hover .videofadeout { opacity: 0.5; }

.videoplay { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 1.2em; height: 1.2em;}

</style>

<script>

var videoElem;

var playButton;

var showProgress = true;

var videoLargeSize = false;

function startedPlaying() {

    showProgress = false;

    playButton.innerHTML = "||"

    playButton.className = "videobutton videoplay videofadeout";

}

function stoppedPlaying() {

    playButton.innerHTML = ">"

    playButton.className = "videobutton videoplay";

}

function updateProgress(ev) {

    if (!showProgress)

       return;

    playButton.innerHTML = "Loading...";

    playButton.className = "videobutton videoloading";

}

function initVideo() {

    videoElem = document.getElementById("videoelem");

    playButton = document.getElementById("videoplaybutton");

    videoZoomButton = document.getElementById("videozoombutton");

    if (!videoElem.play) {

       playButton.style.display = "none";

       videoZoomButton.style.display = "none";

       return;

    }

    videoElem.addEventListener("play", startedPlaying);

    videoElem.addEventListener("pause", stoppedPlaying);

    videoElem.addEventListener("ended", function () {

        if (!videoElem.paused)

            videoElem.pause();

        stoppedPlaying();

    });

    videoElem.addEventListener("progress", updateProgress);

    videoElem.addEventListener("begin", updateProgress);

    videoElem.addEventListener("canplaythrough", function () {

         videoElem.play();

    });

    videoElem.addEventListener("error", function() {

        playButton.innerHTML = "Load failed";

    });

    videoElem.addEventListener("dataunavailable", function () {

         if (!showProgress) {

             showProgress = true;

             playButton.innerHTML = "Loading...";

             playButton.className = "videobutton videoloading";

         }

    });

    videoZoomButton.addEventListener("click", function () {

        var container = document.getElementById("videocontainer");

        videoLargeSize = !videoLargeSize;

        if (videoLargeSize) {

            container.style.width = "640px";

            container.style.height = "360px";

            videoZoomButton.innerHTML = "-";

        } else {

            container.style.width = "400px";

            container.style.height = "225px";

            videoZoomButton.innerHTML = "+";

        }

    });

    playButton.addEventListener("click", function () {

        if (videoElem.paused) {

            if (!videoElem.src)

                videoElem.src = "http://movies.apple.com/movies/us/apple/ipoditunes/2007/touch/ads/apple_ipodtouch_touch_r640-9cie.mov";

            videoElem.play();

        } else

            videoElem.pause();

    } );

}

</script>

<div id=videocontainer>

<video id=videoelem poster="resources/touch-poster.png">

<b style="font-size:15pt">This is fallback content. If you had video support you would see some here!</b></video>

<div class="videobutton videoplay" id=videoplaybutton>&gt;</div>

<div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>

</div>

<script>initVideo();</script>