Search code examples
htmlcssvideomarquee

HTML marquee fly over background video

I am trying to create a marquee that flies over a background video. However the marquee only flies on the left margin of the video player. Here is my code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="StyleSheet.css"/>
</head>
<body>
<div class="row">
    <div id="container" class="col-md-6">
        <iframe width="100%" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
        </iframe>

        <div class="flier">
            <marquee>yay 1st comment</marquee>
        </div>
    </div>
</div>
</body>
</html>

My stylesheet

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;

}

#container video {
    position: relative;
    z-index: 0;
}

.flier {
    color: white;
    position: absolute;
    margin-top: 20px;
    top: 0;
    z-index: 1;
}

#container p {
    color: white;
}

I hope to have the text to fly from the right end of the video container to the left end. However the marquee only flies on the left end. enter image description here

Solution

  • The marquee tag has been deprecated since 2008. It is therefore not officially supported in most modern browsers (Internet Explorer being the exception) [Source]. This makes it unlikely to work reliably enough for anything public facing as you can never assume your visitors will have a browser capable of displaying it correctly, or in fact if it will even display at all.

    You should use CSS3 to achieve the effect now.

    I have found a simple example, on a jsfiddle I will include the code below

    HTML

    <p class="marquee">Your text</p>

    CSS

    /* Make it a marquee */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

.marquee:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

    You should be able to modify this to suit your needs, give it a shot, if you need further help then modify your question or ask a new question with your new code.