Overlaying elements over HTML5 video
Question
I am relatively new to CSS and HTML5 and wanted to see how to overlay HTML text or other elements over a video. I inherited and modified someone's code and it appears to work properly when I play around with it on JSFiddle - https://jsfiddle.net/jxavLps5/ but I can't get it to work right when hosted via my local bottle (WSGI) server . I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="/static/css/container.css" type="text/css" charset="utf-8">
</head>
<body>
<div class="container-module">
<div class="video-container">
<div class="title-container">
<h1>Bug Buck Bunny - Trailer</h1>
</div>
<video autoplay loop class="fillWidth">
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" /> Upgrade browser
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type = "video/mp4" /> Upgrade browser
</video>
</div>
</div>
</body>
</html>
My CSS is here:
html, body{
font-family: 'Open Sans', sans-serif !important;
margin: 0;
}
.container-module {
border-right: none;
border-left: none;
position: relative;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .title-container {
z-index: 2147483647;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #ff0;
}
.video-container video {
position: absolute;
z-index: 100;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
No matter what I do, I can't get the text to appear over the video . Please note that I had to change the position to relative instead of absolute in the fiddle to get it to work. What am I doing wrong? Any advise appreciated.
1 answers
solution1
0 ACCPTED 2016-01-18 01:59:52
Thank you guys for taking the time to respond. Upon further inspection I found that console was spitting the following error:
Resource interpreted as Stylesheet but transferred with MIME type text/html
I had let my server guess mime-type for static contents since it has appropriately done in the past, but it appears it wasn't doing it right.
To fix the problem, I rewrote my static delivery function which I am attaching here in case someone runs into the same later:
@welcomeApp.route('/static/<filepath:path>')
def send_static(filepath):
currentLocation = os.path.dirname(os.path.realpath(__file__))
staticPath = currentLocation + '/static/'
if '.mp4' in filepath:
mime = 'video/mp4'
elif '.webm' in filepath:
mime = 'video/webm'
elif '.css' in filepath:
mime = 'text/css'
else:
mime = None
return static_file(filepath, root=staticPath, mimetype= mime )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.