如何正确显示和对齐响应式YouTube视频?

时间:2018-11-02 13:45:59

标签: html css video youtube embed

我正在尝试将响应的嵌入式YouTube视频集中对齐,并在页眉和页脚导航之间正确显示它们。目前,它不会显示所有3个视频,并且它们无法正确对齐。要查看整个代码,请访问以下链接:my website video page

这是我尝试过的主要视频编码:

import spacy
nlp = spacy.load('en_core_web_sm')
t = (u"India Australia Brazil")
li = nlp(t)
for i in li:
    print(i.text)
list_of_strings  = [i.text for i in li]

1 个答案:

答案 0 :(得分:1)

您需要为视频容器分配css属性。

.video-container {
  width: 500px;
  margin: auto;
  text-align: center;
  position: relative;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
}
<center>
  <strong><br />
  <p></p>
  <div class="video-container"><iframe width="560" height="315"         
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong>
   
</center>