スマホ・タブレットの向きでVIDEOタグの大きさをコントロール

jQueryだと簡潔に書けます。
640pixel以下のときに、幅をきりのいい320pixelではなく
300pixelにしているのは、iPhone用です。
きっちり320pixelだと、はみだすので。

$(document).ready(function() {

    var default_max = $(window).width();
    chgVideoWidth(default_max);

    $(window).bind('orientationchange', function(e){

        var max = $(this).width();
        chgVideoWidth(max);

    });

    function chgVideoWidth(max){

        if(max > 640){
            $("#myVideo").attr("width", "640");
            $("#myVideo").attr("height", "480");
        }

        if(max < 640){
            $("#myVideo").attr("width", "300");
            $("#myVideo").attr("height", "225");            
        }

    }

});

コメント

この記事へのコメントはありません。

CAPTCHA


PAGE TOP