Question

我正在使用HTML 5，并希望在堆栈交换上的视频上添加图像并找到答案：

https://stackoverflow.com/questions/5802183/image-over-a-video-html5#=

然而，当插入代码时，它将我的图像放在角落里，我不知道如何将图像移动到中心而不是侧面。

任何人都可以帮助解决这个问题吗？

Answer 1

试试这段代码

<div id="wrap_video">

<div id="video_box">
    <div id="video_overlays">Logo</div>
    <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

</div>

在css中

#video_box{
    position:relative;
}
#video_overlays {
    position:absolute;
    width:160px;
    min-height:40px;
    background-color:#dadada;
    z-index:300000;
    bottom:45%;
    left:40%;
    text-align:center;
}

这里是小提琴http://jsfiddle.net/kNMnr/3621/

Answer 2

试试这个

.video-box {
    position: relative;
    width: 560px;
    height: 315px;
}
.video-overlays {
    position: absolute;
    width: 160px;
    height: auto;
    background-color: crimson;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.video-overlays img {
    width: 100%;
    display: block;
}
.video-box iframe {
    max-width: 100%;
}

<div class="video-box">
    <div class="video-overlays"><img src="http://i66.tinypic.com/2qnv3vl.jpg" ><!-- you can add you image here --></div>
    <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uMK0gLmiMoI?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>

将图像置于视频上方

2 个答案: