Видео окно не соответствует ширине экрана - PullRequest
Новая
       25

Видео окно не соответствует ширине экрана

0 голосов
/ 05 марта 2012

У меня есть этот сайт здесь: www.bigideaadv.com/xsp, и я пытаюсь получить всплывающее видео, когда вы нажимаете на ссылку просмотра видео.Проблема в том, что я хочу, чтобы он увеличил ширину браузера и высоту браузера - 242px.Он отлично работает в Firefox, он изменяет размер видео при изменении размера окна.В Safari и IE 7+ игра в кости отсутствует.Переменные обновляются с новыми значениями при изменении размера, но это не будет обновлять свойства CSS.Это остается на первоначальной стоимости видео.У кого-нибудь есть мысли?Заранее спасибо.Код для следования: 

function resize() {
    var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) 
    // use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth, viewportheight = window.innerHeight
        //alert(viewportwidth);
        //alert(viewportheight);
    }

    // IE6 in standards compliant mode 
    //(i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined' 
          && typeof document.documentElement.clientWidth != 'undefined' 
          && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE
    else {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    viewportheight = viewportheight - 242;

    $('#sublime_video_wrapper_0').css('width', viewportwidth);
    $('#sublime_video_wrapper_0').css('height', viewportheight);
    $('#sublime_vixdeo_wrapper_0').css('z-index', '1003');
    $('#slide1video embed').css('width', viewportwidth);
    $('#slide1video embed').css('height', viewportheight);
    $('#slide1video embed').css('z-index', '1002');
    $('#slide1video').css('width', viewportwidth);
    $('#slide1video').css('height', viewportheight);
    $('#slide1video').css('z-index', '1001');
    $('video.sublime').css('width', viewportwidth);
    $('video.sublime').css('height', viewportheight);
    $('video.sublime').css('z-index', '1000');
};​

Ответы [ 2 ]

0 голосов
/ 05 марта 2012

Вам нужно исправить свой CSS, я не уверен, как работает возвышенное видео, но видео-контейнер имеет фиксированную высоту 200px и фиксированную ширину 400px.Я бы попробовал: 

#sublime_video_wrapper_0{
   width:100% !important;
   height:100% !important;
}

Это должно решить проблему для браузеров webkit, возможно даже IE, но я не проверял это.

0 голосов
/ 05 марта 2012

вместо всего этого javascript ... вы можете достичь этого с помощью просто CSS ... просто укажите ширину и высоту видео как 100%, а его родительское свойство CSS как max-width:100%;

...