Cant seem to make what I want work so will ask the experts.
I want to achieve this classic example: http://codepen.io/anon/pen/rWwaRE
But have it in between blocks of text and (if possible) starting when you scroll over it like this page (scroll down to see what I mean): http://www.abc.net.au/news/2016-11-14/four-corners-broken-homes-child-protection/7987450
I can make the video fullscreen if I just follow the Polina example but NOT when I try to put it in a or on my page in between other blocks of text. It always just reverts to being in a box or the actual size of the video.
I want to keep it pretty simple if possible - so just CSSS not Javascript if possible. Also if the video does not start automatically that is OK but as long as it is full screen.
This is what I have:
HTML:
<!-- A large block of text -->
<section id="#" class="intro">
<div class="intro-body">
<div class="container">
<h1>TEXT </h1>
<h4>MORE TEXT</h4>
</div>
</div>
</section>
<!--This bit needs to be full screen etc -->
<section>
<video controls id="BG">
<source src="video/MAIN.mp4" type="video/mp4">
</video>
</section>
<!-- Another large block of text -->
<section id="#" class="intro">
<div class="intro-body">
<div class="container">
<h1>TEXT </h1>
<h4>MORE TEXT</h4>
</div>
</div>
</section>
CSS (for video):
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
-webkit-transition: 1s opacity;
transition: 1s opacity;
}
All the textual components are working and fine, I just want the video to look like the link above - if possible?
Any advice would be great!
Thanks
I have made body position as relative and child sections position as absolute, so that these sections will overlap with each other
can you check whether video is playing in full screen. Are you expecting something like this?? if not please describe
.videoSection{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}