I have noticed that GIF's are not really compatible in all browsers so instead I have been using movies. Which has been working find until now. I have a website with a background image that is written in css. I had a feeling this would not work but I tried linking the movie like I would a image and it did not even show up. Below is the html and css.
html
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
css
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
From my understanding, linking the video is not going to happen so what would be another option? How would I go about this? I need to text that is there now to still show up and for the movie to be opaque. If I need to make the actual movie itself opaque I can do that. Thanks
Can view website all together here
You could add a video behind the "need a network" part, by using this code:
I replaced the video, and used the JavaScript code to "autoplay" the video!
If you think the video can autoplay without JavaScript, remove it!
I also replaced theiframe
tag, with thevideo
tag.You can replace the video, by changing the
src=""
attribute on the<source>
tag, inside the<video>
tag.
function playVideo() {
document.getElementsByClassName('video')[0].play();
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<body onload="playVideo()">
<section id="slider">
<video class="video" autoplay="autoplay">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
</body>