我用看起来像是视频的图像渲染div(但出于性能考虑,它只是一个图像)。当用户点击图片时,JS会用相应的youtube嵌入代码替换图片并播放视频。
在图像/视频div下方,我有另一个div,其中包含一些操作图标(共享,类似等)。与其将动作放在image / video div下方,不如将它们放在on:hover的image / video div上方。参见下图以获得更好的描述:
这是我的代码的当前结构。
HTML:
<div class="youtube-container col-sm-6 col-lg-4">
<div class="youtube-player" data-id="<%= trailer.youtube_id %>">
<div class="holder">
</div>
</div>
</div>
<div class="row icons">
<div class="icon">
<img src="icon1">
</div>
<div class="icon">
<img src="icon2">
</div>
<div class="icon">
<img src="icon3">
</div>
</div>
CSS:
.icons img {
height: 35px;
margin: -10px 0 0 5px;
}
.icons {
float:left;
margin: 30px 10px 10px 10px;
}
.icon img {
height: 55px;
}
.youtube-container {
display: block;
margin: 20px auto;
width: 100%;
width: 100%;
}
.youtube-player {
display: block; width: 100%; /* assuming that the video has a 16:9 ratio */
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
cursor: hand;
cursor: pointer;
display: block;
}
img.youtube-thumb {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
height: auto
}
div.play-button {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe { <--- the iframe dynamically generated when someone clicks the image
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
加载页面后,Javascript将经过检查,然后1)找到所有.holder div 2)插入动态生成的图像3)向.holder添加on.click事件监听器,单击该事件时,将图像交换为youtube iframe。
我了解如何实现“悬停”部分,因为我需要CSS方面的帮助并将图标叠加在图像/视频的顶部。
最佳答案
您必须使用position:relative/absolute
片段
.wrap {
position: relative;
/*demo*/
width: 100%;
padding-bottom: 56.25%;
background: lightblue;
}
.wrap:last-of-type {
background:red
}
.youtube-container,
.icons {
position: absolute
}
.icons {
bottom: 3%;
right: 3%;
cursor: pointer;
}
.icon img {
max-height: 55px;
margin-top:5px
}
.youtube-container {
display: block;
margin: 20px auto;
width: 100%;
width: 100%;
}
.youtube-player {
display: block;
width: 100%;
/* assuming that the video has a 16:9 ratio */
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
cursor: hand;
cursor: pointer;
display: block;
}
<div class="wrap">
<div class="youtube-container">
<div class="youtube-player" data-id="trailer.youtube_id">
<div class="holder">
</div>
</div>
</div>
<div class="row icons">
<div class="icon">
<img src="//lorempixel.com/30/30">
</div>
<div class="icon">
<img src="//lorempixel.com/30/30">
</div>
<div class="icon">
<img src="//lorempixel.com/30/30">
</div>
</div>
</div>
<div class="wrap">
<div class="youtube-container">
<div class="youtube-player" data-id="trailer.youtube_id">
<div class="holder">
</div>
</div>
</div>
<div class="row icons">
<div class="icon">
<img src="//lorempixel.com/30/30">
</div>
<div class="icon">
<img src="//lorempixel.com/30/30">
</div>
<div class="icon">
<img src="//lorempixel.com/30/30">
</div>
</div>
</div>
关于html - CSS:将图标悬停在图片/视频div顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35350600/