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

カテゴリ: JavaScript, jQuery, jQuery Mobile

記事投稿日: 2013年2月6日



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




トップに戻る