Question

我需要这样的东西。 https://social.msdn.microsoft.com/Forums/vstudio/en-US/179716e8-89eb-40ff-ba13-339e2d25d1c8/outdir-and-targetpath-macros-are-empty?forum=msbuild 但是第二个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();
});

Answer 1

关于尺码问题，我建议：

$('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);
});

JS Fiddle demo

定位可以通过简单地使用元素上的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 */

JS Fiddle demo

参考文献：

CSS：
- position。
JavaScript的：
- Element.clientWidth。
- Element.clientHeight。
- HTMLElement.dataset。
jQuery的：
- click()。
- replaceWith()。

在隐藏点击的视频上创建div和图像叠加

1 个答案: