Как изменить ширину загружаемого видео на разных устройствах?

lifeisgood

Привет! я использую https://videojs.com/

библиотека в моем

Приложение laravel 5.7/Blade/jquery/Bootsrap 4.1, и вопрос в том, есть ли способ изменить ширину загружаемого видео в зависимости от устройства, чтобы он соответствовал родительскому div для видеоблока?

Этот плагин дает возможность автоматически устанавливать ширину/высоту (теперь это прокомментировано в коде ниже). Я попытался обернуть видеоблок с помощью div с заданной шириной (или максимальной шириной):

 .block_container_internal {
width: 390px !important;
padding-right: 5px;
padding-left: 5px;
}

HTML: в css устройства:

  <div class="row"> <div class="block_container_internal"> {{--width="640" height="264"--}} <video id="video_page_content_{{ $nextPageContentVideo->id }}" class="video-js" controls preload="auto" poster="/images/video_poster.jpg" data-setup="{}"> <source src="{{ $next_video_url }}" type='video/mp4'> <source src="{{ $next_video_url }}" type='video/webm'> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="[URL='https://lumtu.com/yti/dgccgdC9odHRwczovL3ZpZGVvanMuY29tL2h0bWw1LXZpZGVvLXN1cHBvHc1']https://videojs.com/html5-video-support/[/URL]" target="_blank">supports HTML5 video</a> </p> </video> </div> </div>

Код (CSS): но в любом случае видеоблок занимает всю ширину экрана.

Я просмотрел документацию на сайте, но не нашел никаких вариантов. я загрузил эту проблему http://votes.nilov-sergey-demo-apps.tk/about

Пожалуйста, посмотрите на устройство iPad: https://imgur.com/a/GPXm3gi

Поскольку я не хочу показывать видео в полном объеме, Я хотел бы изменить ширину видеоконтейнера с помощью переноса div, но не удалось. Спасибо!

JimmySpot

Вам нужно знать соотношение сторон, которое вы хотите, чтобы проигрыватель показывал, а затем использовать небольшой.

трюк.

Допустим, вам нужен формат 16:10. (подходит для формата 16:9 + элементы управления)

 
.videoContainer {

position:relative;

width:100%;

height:0;

padding-bottom:62.5%;
}

.videoContainer video {

position:absolute;

width:100%;

height:100%;
}

Код (разметка): CSS будет таким:

  <div class="videoContainer"> <video blah blah blah></video> </div>

Код (разметка): Любопытная особенность CSS заключается в том, что заполнение по высоте в процентах зависит от ширины.

Таким образом, установив для контейнера ширину 100%, мы можем получить 62,5% от нее в качестве высоты, используя отступы вместо высоты.

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

Просто разделите высоту на ширину, чтобы получить нужный вам процент: 10/16 == 0,625 == 62,5%. Таким образом, соотношение сторон 4:3 составляет 75%. 16:9 — 56,25%. Обычно так это и делается.

Приятно то, что затем его можно динамически масштабировать по ширине, поэтому вам даже не придется запрашивать медиа для определенных размеров.

Просто установите максимальную ширину, чтобы плеер не становился слишком большим, и покончим с этим. Помните, что HTML сам по себе быстро реагирует, поэтому пусть все будет плавно.

до вы начинаете бездельничать, бросая на него медиа-запросы или переворачивая птицу с нормами доступности, объявляя вещи в пикселях.

Похожие темы	Дата
Как переопределить горячие клавиши Image ready	19.10.2024, 18:10
Анимация в фотошоп	19.10.2024, 18:10
Как изменить шаблон и сделать более светлый фон?	19.10.2024, 18:10
Свертсал сайт по оформлению шенгена зацените дизайн?	19.10.2024, 18:10
Посоветуйте вариант дизайна	19.10.2024, 18:10
Проблема с дочерней темой Wordpress	19.10.2024, 18:10
Возмутительно, что Inoutscripts/Nesote продолжают заниматься мошенничеством.	19.10.2024, 18:10
WordPress потерял доверие дизайнеров веб-сайтов	19.10.2024, 18:10
Что не так с этим дизайном сайта?	19.10.2024, 18:10
Кто-нибудь знает, как стилизовать смайлы?	19.10.2024, 18:10

Как изменить ширину загружаемого видео на разных устройствах?

lifeisgood

JimmySpot

I AM

Интересно