HTML字幕飞越背景视频_Html_Css_Video_Marquee

HTML字幕飞越背景视频

html css video

HTML字幕飞越背景视频,html,css,video,marquee,Html,Css,Video,Marquee,我试图创建一个字幕，飞越背景视频。但是，字幕仅在视频播放器的左侧边缘飞行。这是我的密码： <!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/

我试图创建一个字幕，飞越背景视频。但是，字幕仅在视频播放器的左侧边缘飞行。这是我的密码：

<!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>

我希望文本能够从视频容器的右端飞到左端。然而，字幕只在左端飞行。

自2008年以来，marquee标签一直被弃用。因此，大多数现代浏览器都不支持它（Internet Explorer是例外）。这使得它不太可能对任何面向公众的东西足够可靠地工作，因为你永远不能假设你的访问者将有一个能够正确显示它的浏览器，或者事实上它甚至可以显示

您现在应该使用CSS3来实现这个效果

我发现了一个简单的例子，在一个例子中，我将包括下面的代码

HTML

您应该能够根据自己的需要对此进行修改，试一试。如果您需要进一步的帮助，请修改您的问题或使用新代码提出新问题。

“我的代码有什么问题？”

* {
    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;
}

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

/* 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 }
}