aatish/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

video cover

Browse source
This commit is contained in:
Arvind Tiwari 2017-12-07 23:40:14 +05:30
parent ed873ca59f
commit 13d3419cd5
2 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ungleich_page/static/ungleich_page/css/ungleich.css
View file

@ -256,6 +256,31 @@
background-position: center; background-position: center;
} }
.bg_vid {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
@media (min-aspect-ratio: 16/9) {
.bg_vid > video {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.bg_vid > video {
width: auto;
height: 100%;
}
}
.timeline>li .timeline-panel { .timeline>li .timeline-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

15
ungleich_page/templates/ungleich_page/includes/_header.html
View file

@ -12,7 +12,12 @@
<!-- Wrapper for slides --> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<div class="bg_img" style="background-image:url({% static 'ungleich_page/img/header-bg.jpg' %})"></div> <div class="bg_vid">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bg_vid" autoplay muted loop>
<source src="https://www.videvo.net/videvo_files/converted/2013_08/preview/hd0933.mov68938.webm" type="video/webm">
<source src="https://www.videvo.net/videvo_files/converted/2013_08/preview/hd0933.mov68938.mp4" type="video/mp4">
</video>
</div>
<div class="container"> <div class="container">
<div class="intro-cap"> <div class="intro-cap">
{% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %} {% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
@ -22,7 +27,13 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
<div class="bg_vid">
<video poster="//ak8.picdn.net/shutterstock/videos/16400158/thumb/1.jpg" id="bg_vid" autoplay muted loop>
<source type="video/mp4" src="//ak8.picdn.net/shutterstock/videos/16400158/preview/stock-footage-abstract-blue-geometrical-background-with-moving-lines-and-dots-looping-cg-animation.mp4">
<source type="video/webm" src="//ak8.picdn.net/shutterstock/videos/16400158/preview/stock-footage-abstract-blue-geometrical-background-with-moving-lines-and-dots-looping-cg-animation.webm">
</video>
</div>
<div class="container"> <div class="container">
<div class="intro-cap"> <div class="intro-cap">
{% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %} {% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}