Question

页面上有一个水平居中的YouTube视频，但问题是在移动设备（手机/平板电脑）上，视频加载（有时1.5秒）需要一些时间。因此，在此期间，为视频指定的区域显示为空白。所以人们可能会认为那里什么也没有，继续前进。

所以我试着制作一个背景文字（在视频下面）说'视频正在加载'。在查看如何制作背景文本后，我找到了以下answer。我尝试了两种方法（使用::之前和另一个div，但没有成功）。

这是我my fiddle最接近我能得到的。不透明度只是为了看到视频背后的文字。这是我失败的CSS部分（就在这里，因为SO拒绝没有代码的帖子和jsfiddle）。

.video-preloader{
    position: relative;
    text-align:center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
}

Answer 1

由于目标元素.video-preloader绝对定位，因此父元素.video相对定位非常重要。

.video {
    /* .. */
    margin:0 auto;
    position:relative;
}

为了使文本垂直/水平居中，您可以使用以下方法。它适用于不同维度的动态文本(example) ..

EXAMPLE HERE

.video-preloader {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: -1;
    overflow: hidden;
}
.video-preloader > span {
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    width:100%;
    top: 50%;
    left: 0;
}

或者，如果你想要的是一个加载.gif的背景图片，这样的东西就可以了：

EXAMPLE HERE

.video-preloader {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: -1;
    overflow: hidden;
    background: url('http://i.stack.imgur.com/w28B4.gif') 50% 50% / 80px 80px no-repeat;
}

您可以轻松修改速记属性中的background-position / background-size属性。在这种情况下，图像以background-position: 50% 50% ..

为中心

如何在youtube视频下显示背景文字？

1 个答案: