How to make a background text appear under youtube video?

Question

There is a horizontally centered youtube video on the page, but the problem is that on mobile devices (phones/tablets) it takes time before the the video loads (sometimes 1.5 secs). So during this time the area which is designated for a video appears to be blank. So people might think that there is nothing there and move on.

So I tried to make a background text (underneath the video) saying 'Video is loading'. After looking how to make background text, I found the following answer. I tried both approaches (with ::before and with another div inside, but with no success).

Here is my fiddle with the closest I was able to get. Opacity there is just to see that the text is behind the video. And here is my failed part of CSS (just here because SO reject posts without code and with jsfiddle).

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

@JoshCrozier thank you, this is amazing. Can you post it as an answer, so that I can acknowledge your help? — Salvador Dali, Mar 17 '14 at 03:32

score 1 · Accepted Answer · answered Mar 17 '14 at 03:43

Since the targeted element, .video-preloader is absolutely positioned, it's important that the parent element, .video is relatively positioned.

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

In order to vertically/horizontally center the text, you could use the following approach. It works with dynamic text of varying dimensions (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;
}

Alternatively, if you want is a background image with a loading .gif, something like this would work:

EXAMPLE HERE

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

You can easily modify the background-position/background-size properties within the shorthand property. In this case, the image is centered with background-position: 50% 50%..

How to make a background text appear under youtube video?

1 Answers1