Я сделал видео на своей странице отзывчивым, но теперь не могу отцентрировать его - PullRequest
Новая
       23

Я сделал видео на своей странице отзывчивым, но теперь не могу отцентрировать его

0 голосов
/ 14 марта 2019

Я работаю над своим третьим проектом для freecodecamp, делая целевую страницу продукта.Я встроил видео и посмотрел в Интернете некоторый код, чтобы сделать его отзывчивым.Я применил это, но теперь, независимо от того, что я попробовал, я не могу получить видео в центре.Я даже пытался сделать flexbox, чтобы использовать justify-content и center.

Вот соответствующий код HTML и CSS, который, я считаю, должен был бы иметь отношение к центрированию моего видео (в этом примере ничего не пыталось центрировать):

HTML 

<section id="video">
<iframe width="560" height="315" src="<!-- my embed src here -->" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</section>

CSS 

#video {
  padding-bottom: 55%;
  position: relative;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top: 50px; 
}
#video iframe,
#video object,
#video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
}

Я очень плохо знаком с любым языком кодирования и следил за freecodecamp.Мне удалось выяснить, как встроить видео в HTML, но я получил код CSS из источника в Интернете.Я попытался добавить 

display: flex;
justify-content: center;

в раздел #video CSS, но ничего не получилось.Я был разочарован на протяжении всего этого проекта, и кажется, что любая логическая вещь, которую я пытаюсь сделать, ничего не делает.Я надеюсь, что это станет лучше.

Ответы [ 4 ]

0 голосов
/ 14 марта 2019

Вы должны иметь возможность центрировать элемент видеооболочки, просто задав ему динамические поля: 

<styles>
    #video {
        padding-bottom: 55%;
        position: relative;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-top: 50px;

        /*display item as block element */
        display: block;

        /* align left and right margins dynamically throwing you right in the middle */
        margin-left: auto;
        margin-right: auto

        /* width and/or max-width must tell us how big video wrapper can really be */
        width: 100%;
        max-width: 500px;
    }
</styles>

Если ваше видео по-прежнему не центрировано, то это означает, что его родительский элемент имеет неверную ширину..

0 голосов
/ 14 марта 2019 
 #video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
}

Кому: 

#video embed {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: 60%;
   height: 60%;
   margin: 0 auto;
}
0 голосов
/ 14 марта 2019

Ваш видеооболочка нуждается в стилях flexbox.Так что это должно работать: 

#video {
  padding: 50px;
  display: flex; // flexbox on the container
  align-items: center; // centers items against the main flex axis, vertically by default
  justify-content: center; // centers items on the main axis, horizontally by default
}
#video iframe {
  // nothing else needed on the iframe to achieve centering on the page. This will need more styles if you have more than one item in the flex container, ie more than one iframe in the #video container.
}
0 голосов
/ 14 марта 2019

Замените следующий код CSS 

#video iframe,
#video object,
#video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
}

с этим 

#video iframe,
#video object,
#video embed {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
}
...