Форматирование Youtube iFrame. Встраивание и поддержка черных боковых полос - PullRequest
Новая
       136

Форматирование Youtube iFrame. Встраивание и поддержка черных боковых полос

0 голосов
/ 14 июля 2020

Проблема: я бы хотел, чтобы плеер Youtube сохранял черные полосы сбоку , которые не позволяли бы видео становиться слишком большим. Это то, что Youtube делает с видео на своем сайте. Однако, когда я использую встраивание, видео занимает 100% ширины.

В настоящее время я использую react-youtube для их компонента Youtube.

Player реализация 

const opts = {
    height: '100%',
    width: '100%',

    playerVars: {
        autoplay: 0,
    },
}

<YouTube videoId={heroVideo.videoId} 
  opts={opts} 
  onEnd={() => finishedVideo(heroVideo, playlistDisplay, playlistIndex, videos)}/>

Стиль плеера 

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    /*padding-top: 25px;*/
    height: 0;
    display: block;
    background-color: black;

}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: black;
}

Картинки для справки. Одно и то же видео, одинаковая ширина экрана.

Желаемое поведение отображения видео. На youtube.com problem image

Incorrect video display. On my app enter image description here

Another reference to video display I'm looking for Еще одна ссылка на neverthink.tv

1 Ответ

0 голосов
/ 14 июля 2020

Решением до сих пор (исключая любые найденные мной ошибки) было обновить CSS.

Удалить нижнюю часть и установить высоту на 100%. 

.videoWrapper {
position: relative;
height: 100%; 
display: block;
background-color: black;

}

...