Погода: −11 °C
18.01−13...−9пасмурно, небольшой снег
19.01−19...−15переменная облачность, без осадков
  • veteran

    Сообщений: 2946

    Имеем некий блок <video></video>


    <video data-showcase-video webkit-playsinline poster="/videos/Oka_copyrightdownloopscom.jpg" loop autoplay>
    <source src="/videos/background.webm" type="video/webm" />
    <source src="/videos/background.mp4" type="video/mp4" />
    <source src="/videos/background.ogg" type="video/ogg" />
    </video>


    Само видео размером 800 на 600 пикселей

    его css

    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    max-width: 100%;
    backface-visibility: hidden;


    Для того чтобы это видео растягивалось по горизонтали при увеличении разрешения экрана (например широкоформатый монитор), достаточно указать свойство
    width: 100%; - это работает
    Логично предположить чтобы растянуть видео по вертикали указать height: 100%;
    Но это не работает. Свойство width: 100%; в этом случае отключается и по краям экрана имеет черные квадраты.

    Как без применения js, растянуть видео и по вертикали тоже?

  • activist

    Сообщений: 197

    попробуйте открыт в хроме какой нибудть пример с видео и копипейстить стиль оттуда

    вот здесь с модалем (всплывающем окном)
    http://www.worldventuresfoundation.org/getinvolved/serviceexcursions

    копипесччу с хрома 768px

    @media screen and (max-width: 768px)
    #wvf-video-modal.modal, #volountours-video-modal.modal, #video-modal.modal {
    width: 97% !important;
    left: 3%;
    margin-left: -10px !important;
    }


    @media screen and (max-width: 768px)
    #wvf-video-modal #video-1, #volountours-video-modal #volountours-video, #video-modal #video-1 {
    width: 98% !important;
    }


    .video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }



    В Network смотрю версию Video.js

    Video.js - HTML5 Video Player
    Version 3.2.0

    пожалуйст используйте "code" таг когда пишите примеры кода

  • activist

    Сообщений: 197

    вполне возможно, что использования video.js (скачайте) поможет

    в коде вроде height 100% есть, но

    не уверена, что ответила по существу вопроса

    "растянуть видео по вертикали"

Записей на странице:

Перейти в форум

Модераторы: