美文网首页Bootstrap 自学笔记
响应式嵌入视频 - Embed Responsive

响应式嵌入视频 - Embed Responsive

作者: 勤劳的悄悄 | 来源:发表于2016-04-01 14:34 被阅读1196次

    如何创建响应式嵌入视频

    • 在是 <iframe>, <embed>, <video>, 或者 <object> 设置 .embed-responsive-item 类,视频一般使用 <iframe>
    • 媒体源在 <iframe>src 属性中设置
    • 显示比例可以是 .embed-responsive-16by9 或者 .embed-responsive-4by3
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>提示!</strong> 改变浏览器的大小可以看到响应式图片如何工作 
    </div>
    
    <h2>16:9 视频比例</h2>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="//player.youku.com/player.php/sid/XMTA4MzgxNDQ4/v.swf"></iframe>
    </div>
    
    <hr>
    <h2>4:3 视频比例</h2>
    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="//player.youku.com/player.php/sid/XMTA4MzgxNDQ4/v.swf"></iframe>
    </div>
    
    03.PNG

    相关文章

      网友评论

        本文标题:响应式嵌入视频 - Embed Responsive

        本文链接:https://www.haomeiwen.com/subject/phdylttx.html