如何并排显示文字和视频（HTML网页）

Question

我创建了一个HTML页面，左侧是一些文本，右侧是嵌入的YouTube视频。

但视频在高处伸展。

这是我正在使用的代码

<br>
<div class="col-md-6">
<h3> <strong> Heading </strong > </h3>

<hr>

<h3 class="null"><i class="fa fa-check" aria-hidden="true"></i> &nbsp; Text blurb here </h3>
<h3 class="null"><i class="fa fa-check" aria-hidden="true"></i> &nbsp; Text blurb here</h3>
<h3 class="null"><i class="fa fa-check" aria-hidden="true"></i> &nbsp; Text blurb here</h3>
<h3 class="null"><i class="fa fa-check" aria-hidden="true"></i> &nbsp; Text blurb here</h3>
<h3 class="null"><i class="fa fa-check" aria-hidden="true"></i> &nbsp; Text blurb here </h3>

<hr>
<h3> <strong> Some text here as well  </strong>
<h4> some more text here too </h4><br>
</div>

<div class="col-md-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="clear"></div>

如何让视频不在高处伸展。

Answer 1

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Think this will help you dude ....

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_width_height

Answer 2

只需在iframe = 100％中设置宽度和高度即可填充bootstrap div

https://github.com/sanisoft/jQuery-fileExif/blob/master/jquery.exif.js

以下是它的jsfiddle：https://jsfiddle.net/97pd8Lsh/