我需要将YouTube视频嵌入到我的响应式网站中,但它无法正确扩展,尤其是在移动设备上.它在桌面和平板电脑上看起来很好,但是一旦你的视口宽度低于600,视频就会破坏它的容器.要在移动设备上查看整个视频,您需要捏一点,其余内容只能垂直填充大约1/2的屏幕.不太好.
我希望文本内容为1/3宽,视频在桌面和平板电脑上为2/3宽,并在移动设备上堆叠,视频和内容均为视口宽度的100%.我已经尝试在iframe上使用width ="100%",但是当您调整大小并且视频被拉伸或压缩时,高度无法正确缩放.
我还需要使用CSS,因为我只是将我的样式表放在stock bootstrap 3.0上.
这是我的代码:
<div class="container">
<div class="row">
<div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
<div class="col-sm-8">
<iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
</div>
</div>