Отзывчивый список видео iframe по горизонтали и максимальной ширине - PullRequest
Новая
       32

Отзывчивый список видео iframe по горизонтали и максимальной ширине

0 голосов
/ 20 сентября 2018

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

Цель:
Создать адаптивный горизонтально-ориентированный центр, выровненный по центру, список из трех (или более) видео на YouTube с максимальной шириной и максимальной-высота (400 x 225), но может быстро уменьшаться ниже максимальных значений.

Где я:
Я создал адаптивный вертикально ориентированный список из трех видеороликов YouTube, каждое из которых находится в своем собственном адаптивном контейнере;однако я не могу на всю жизнь заставить фреймы ориентироваться горизонтально и центрироваться внутри контейнера видео, оставаясь при этом отзывчивым.

Что я пробовал:
(float: left; float: right;дисплей: inline-block; выровнять: влево; выровнять: вправо; отступ: margin :) ETC.Я подключил CSS к самому html, а также к включаемому файлу CSS и протестировал множество перестановок и их комбинаций, но все безрезультатно.Несмотря на это, я исследовал это в Google, и хотя я нашел похожие сценарии, я не нашел решения для этого конкретного варианта.

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

Код :::

Из CSS включают: 

.video{
    color: #927c5a;
    font-family: "Impact", Impact,charcoal, sans-serif;
    font-size: 19px;
    font-weight: normal;
    height: auto;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    display: inline;
    float: left;
    border: 1px solid blue;
    }        
.videoWrapper {
    position: relative;
    padding-bottom: 205px;
    padding-top: 25px;
    height: 0;
    max-width: 400px;
    max-height: 225px;
    border: 1px solid red;
    }
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 225px;
    border: 1px solid green;
    }

Из файла HTML: 

<div class="video">
  <div class="videoWrapper">
    <iframe  src="https://www.youtube.com/embed/o6l14SkYtaY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

 <div class="videoWrapper">
   <iframe  src="https://www.youtube.com/embed/o6l14SkYtaY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

 <div class="videoWrapper">
   <iframe  src="https://www.youtube.com/embed/o6l14SkYtaY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
 </div>

1 Ответ

0 голосов
/ 20 сентября 2018

Не уверен, если вы этого хотите ... 

.video {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

iframe {
   max-width: 400px;
   max-height: 225px;
   width: 100%;
   height: 100%;
}

И сбросьте .videoWrapper дополнительно div.

...