Создание масштабной шкалы видеоJS при изменении размера окна

Question

Это довольно простой вопрос, но я боролся с ним уже несколько дней без успеха.

У меня есть настольное приложение Electron, которое позволяет пользователю выбирать локальные видео для воспроизведения. Я хочу иметь возможность указать div для видео и ограничить размер видео, пропорционально (например, поддерживать соотношение сторон), до размера этого div. Я также должен иметь шкалу видео, если пользователь меняет размер окна, например, делая приложение полноэкранным.

До сих пор мне удалось центрировать видео, но при изменении размера окна видео остается того же размера (изображения ниже).

Я попытался добавить классы CSS videojs (vjs-16-9, vjs-4-3) и попытался использовать data-setup='{"fluid": true}', но это заставило видео захватить все окно.

Итак, как я могу указать, что хочу видео высота, чтобы взять некоторый процент экрана - скажем, 40%, разрешить правильное соотношение сторон для его ширины, а затем, когда изменяется размер окна , пересчитать?

---

.video-center { 
     margin-left: auto !important; 
     margin-right: auto !important; 
     height: 100%; 
    } 

---

<div class="videocontent"> 
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center" controls> 
    </video> 
    </div> 

Режим окна:

Полноэкранный режим:

Answer 1

Если я понимаю вашу конечную цель, вы хотите абсолютно позиционировать видео и использовать родительский элемент для создания дополнений, которые будут имитировать соотношение сторон видео.

.videocontent { 
 
    position: relative; 
 
    height: 0; 
 
    padding-top: 56.25%; /* divide the video height by the width to get this percentage */ 
 
} 
 
.videocontent video { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
}

<div class="videocontent"> 
 
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center" controls> 
 
    </video> 
 
</div>

Answer 2

Заменить Videojs

Я предлагаю, чтобы удалить Videojs и использовать приведенные ниже инструкции для создания пользовательского кода.

Установите <video> элемент ширина и высота атрибуты.

<video width="991" height="557"></video> 

Мысль мы явно указать width и height атрибуты <video> элемента. Мы будем использовать эти значения для первоначального определения правильного соотношения сторон.код См Javascript ниже:

Установить родительскую ширину контейнера к содержанию вашего сердца

.videocontent { 
    width: 80%; 
    /* for horizontal centering (optional) */ 
    margin-right: auto; 
    margin-left: auto; 
} 

Включите JQuery на вашей странице.

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 

Пользовательские Java- для обработки динамического соотношения сторон.

// Find all <video> element 
var $allVideos = $('video'), 

    // The element that is fluid width 
    $fluidEl = $('.videocontent'); 

// Figure out and save the aspect ratio for each <video> element on the page 
$allVideos.each(function() { 

    $(this) 
    // values from <video> height and width attributes 
    .data('aspectRatio', this.height/this.width) 

    // and remove the hard coded width/height 
    .removeAttr('height') 
    .removeAttr('width'); 

}); 

// When the window is resized 
$(window).resize(function() { 

    var newWidth = $fluidEl.width(); 

    // Resize all <video> according to their own aspect ratio 
    $allVideos.each(function() { 

    var $el = $(this); 
    $el 
     .width(newWidth) 
     .height(newWidth * $el.data('aspectRatio')); 

    }); 

// Kick off one resize to fix all videos on page load 
}).resize(); 

Кредит Fluid Width YouTube Videos