0

I have two background elements (one picture one a video). How do I display the picture only when the page first gets loaded and then use the video background only when the page gets refreshed?

I tried a no-repeat in the image, but no success. I don't think local storage counter would work, because each time the page gets loaded from scratch it would remember the previous number. 

<!-- image background -->
<style>
html { 
background: url("{% static 'images/calc_background2.jpg' %}") no- 
repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fullscreen-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100; 
        }

.fullscreen-bg__video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
</style>

<!-- video background -->
<div class="fullscreen-bg">
<video autoplay muted poster="{% static 'images/background2.jpg' %}" 
class="fullscreen-bg__video" id="myVideo"> <!--autoplay-->
<source src="{% static 'videos/calc_background_vid109.mp4' %}" 
type="video/mp4">
</video>
</div>

When the page first opens, we see the image background. when the page is refreshed the video background would play. Thanks for the help!

tobias wettstein
  • 1

0 Answers0