css+div 列表调用腾讯视频效果 直接全屏播放

<div class="page_container_w w100 bgfff">

<div class="page_container mar1024">

<div class="caseList">

<ul class="clearfix">

<!--循环区域开始-->

<li>

<a>

<div class="img"><iframe frameborder="0" height="260" width="100%"

src="https://v.qq.com/txp/iframe/player.html?vid=3" allowfullscreen="true"></iframe></div>

<div class="bottom clearfix">

<div class="title fl ellipsis">标题</div>

<!-- <div class="more fr"><i class="iconfont icon-youjiantou"></i></div> -->

</div>

</a>

</li>

<!--循环区域结束-->

</ul>

</div>

<div class="pages"></div>

</div>

</div>

/*视频列表样式调用*/

.caseList ul {width: 102%;}

.caseList li {float: left; width: 31%; margin-right: 2%; margin-bottom: 25px; position: relative; box-shadow: 0 2px 5px #ccc; top: 0; transition: all 0.3s;}

.caseList img {width: 99%;}

.caseList .bottom {padding: 0 15px; line-height: 58px; background: #f5f5f5;}

.caseList .title {font-size: 16px; color: #4d4d4d;}

.caseList .more i {font-size: 14px; color: #fff; background: #cacaca; display: inline-block; line-height: 30px; border-radius: 50%; text-align: center; width: 30px; height: 30px;}

.caseList li:hover {top: -5px; box-shadow: 0 6px 10px #ccc;}