我需要这样的东西。 http://jsfiddle.net/2fAxv/1/
但是第二个div
#hide
应该在屏幕的左上角有一些边距。想不通。此外,一旦在 youtube 上单击图像,视频就会缩小到默认大小。有没有办法在不使用 <iframe>
的情况下用相同的代码修复它的大小?
html
<div class="vid">
<img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
<div id="hide1">
<h3>johnny Depp<br><span>Acting Technique</span></h3>
</div>
</div>
CSS
.vid {
width: 350px;
height: 298px;
float: left;
margin: 20px 25px 70px 70px;
background-size: cover;
background-position: 0px -50px;
background-repeat: none;
}
.vid div {
overflow: hidden;
height: 298px;
width: 300px;
background-color: rgba(255, 255, 255, 0.32);
}
.vid div h3 {
position: absolute;
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
padding: 10px;
background-color: rgba(255,255,255,0.8);
margin-left: 30px;
max-width: 450px;
}
.vid div h3 span {
color: black;
text-align: center;
width: 300px;
font-family: 'Source Sans Pro', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
}
函数
$('#hide').click(function() {
video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>';
$(this).replaceWith(video);
$('#hide1').hide();
});
最佳答案
关于尺码问题,我建议:
$('img').click(function () {
// creating an <iframe> element:
var video = $('<iframe />', {
// setting its properties,
// this.dataset.video returns the
// value of the 'data-video' attribute:
'src': this.dataset.video,
// retrieves the height/width:
'height': this.clientHeight,
'width': this.clientWidth
});
$(this).replaceWith(video);
});
定位可以解决,这取决于你希望元素定位的位置,只需在要定位的元素上使用 position: absolute
(#hide1
元素, position: relative
在父 .vid
元素上:
.vid {
/* other (unchanged) styles omitted for brevity */
position: relative;
}
.vid div {
/* other (unchanged) styles removed for brevity */
position: absolute;
top: 10%;
left: 10%;
}
/* some minor changes follow,
just for tidying up/aesthetics;
but irrelevant to the 'positioning'
aspect */
引用资料:
- CSS:
位置
。
- JavaScript:
- jQuery:
- >
click()
. - >
replaceWith()
.
- >
关于javascript - 在单击时隐藏的视频上创建 div 和图像覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30612192/