Question

我目前正在尝试在模式框中实现一个响应性的视频。我已经将它工作到了显示和响应的位置（右侧有一个大约700px宽的空白区域，不知道为什么）

问题在于，尝试更改iframe的默认大小时，它会保持相同的大小，或者仅更改内部视频的大小并破坏响应能力。

我知道我错过了一些简单的东西，但是在JS小提琴中实现它似乎在某种程度上使它显示得比在我的页面内更好！

<!-- Button trigger modal -->
<div class="span12 text-center">
<p><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Video player modal </button></p>

    <div class="modal custom fade" id="myModal2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1">

    <div class="modal-body" style="position: relative; padding-bottom: 20%; overflow: hidden; paddng-top: 80%; height: 150%;">

    <iframe width="640" height="360" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 560px; max-height: 315px;" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

</div>
</div>
</div>
<!-- /.modal-content -->

http://jsfiddle.net/ka8uW/225/

Answer 1

尝试以下代码。这将在整页显示响应视频

<style type="text/css">
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
    <div class="videoWrapper">
        <iframe src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen></iframe>
    </div>

Answer 2

使用bootstrap响应嵌入....

<div class="embed-responsive embed-responsive-4by3">
      <iframe src="http://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen=""></iframe>
</div>

或

<div class="embed-responsive embed-responsive-16by9">
      <iframe src="http://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen=""></iframe>
</div>

模态框内的视频未显示正确的大小

2 个答案: