Struggling to achieve the desired result, seeking advice from experts.
Looking to create a classic example like this: http://codepen.io/anon/pen/rWwaRE
But want it embedded within blocks of text and possibly triggered by scrolling over it similar to this page (scroll down to see):
I can make the video fullscreen by following the Polina example but struggle when integrating it with other text blocks on my page. It always appears in a box or at its actual size.
Prefer to keep it simple using just CSS, avoiding JavaScript if possible. The video doesn't necessarily need to start automatically as long as it's displayed in fullscreen mode.
This is what I currently 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 part should 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 text elements are functioning properly, looking for assistance in making the video resemble the provided link - any suggestions?
Thank you