<video class="video" id="video1">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
</video>
<a class="video-control js-video-control paused" href="#" data-video="video1"></a>

.video {
    margin: 1em auto;
    display: block;
    position: relative;
    max-width: 100%;

    &:hover {
        + .video-control {
            opacity: 0.8;
        }
    }
}

.video-control {
    font-size: 4em;
    opacity: 0;
    transition: opacity 0.3s;
    color: #333;
    text-align: center;


    &:hover {
        opacity: 1;
    }

    &:before, &:after {
        position: absolute;
        width: 1em;
        height: 1em;
        top: 50%;
        left: 50%;
        margin: -0.5em 0 0 -0.5em;
    }

    &:before {
        content: '\25BA';
    }

    &:after {
        content: 'll';
        font-weight: 700;
    }

    &.paused {
        &:after {
            opacity: 0;
        }
    }

    &.playing {
        &:before {
            opacity: 0;
        }
    }
}

function playVideo(el) {
    var videoId = el.data('video');
    var video = document.getElementById(videoId);

    if (video.paused) {
        // Play the video
        video.play();
        el.removeClass('paused').addClass('playing');
    }
    else {
        // Pause the video
        video.pause();
        el.removeClass('playing').addClass('paused');
    }
}

$(document).on('click', '.js-video-control', function(e) {
    playVideo($(this));
    e.preventDefault();
});