How to play a video in full-screen mode on mobile

Question

I'm using Fancybox plugin for playing a video on modal. The requirement of playing video on desktop and tablet are fulfilled with this easily. But on mobile, instead of showing a modal window, the video should play in full-screen mode automatically when click the link. I tried disabling the plugin in mobile, to hope if youtube opens it in full screen mode automatically when a user redirects. But didn't work.

How can I achieve this? Or is that actually possible?

Here is the jQuery

$(function () {
        var jWindow = $(window);
        $(".youtube-media").click(function () {
            if (jWindow.width() <= 768)
                return;
            $.fancybox({
                'padding': 2, 'autoScale': true, 'transitionIn': 'none', 'transitionOut': 'none', 'title': this.title,
                'width': 600, 'height': 340, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type': 'swf', 'swf': {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                }
            });
            return false;
        });
    });

And here is the HTML Code

<a class="youtube-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Play Video</a>

Answer 1

For a cross-device compatibility, I would rather use youtube in its embed format so you can open it as iframe with this html format :

<a class="youtube-media" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque&fs=1">youtube</a>

Notice that I also added the parameter &fs=1 to add fullscreen support.

Then this script should do the trick :

$(".youtube-media").on("click", function (e) {
    var jWindow = $(window).width();
    if ( jWindow <= 768 ) {
        return;
    }
    $.fancybox({
        href: this.href,
        type: "iframe" // when using embed format
    });
    return false;
});

See this JSFIDDLE in small format so youtube should be fullscreen (the results area when smaller than 768px). Then see this JSFIDDLE in big format so youtube displays in fancybox.

NOTE : .on() requires jQuery v1.7+