当前位置 : 主页 > 网页制作 > Bootstarp >

bootstrap 固定比例响应式视频

来源:互联网 收集:自由互联 发布时间:2021-06-12
link rel=‘stylesheet prefetch‘ href=‘//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css‘link rel=‘stylesheet prefetch‘ href=‘//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css‘h1Bootstrap 3 Re
<link rel=‘stylesheet prefetch‘ href=‘//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css‘>
<link rel=‘stylesheet prefetch‘ href=‘//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css‘>
<h1>Bootstrap 3 Responsive Video Embeds that Maintain Aspect Ratio <i class="fa fa-heart"></i></h1>

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2>16:9 Responsive Aspect Ratio</h2>
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://img.558idc.com/uploadfile/141201/among_the_stars.mp4"></iframe>
          </div>
        </div>
        <div class="col-sm-6">
            <h2>4:3 Responsive Aspect Ratio</h2>
            <div class="embed-responsive embed-responsive-4by3">
                <iframe class="embed-responsive-item" src="http://img.558idc.com/uploadfile/141201/among_the_stars.mp4"></iframe>
            </div>
        </div>
    </div>
</div>
网友评论