<div class="header-container" role="banner">
<div class="top-image test-top"></div>
<div id="header-video-container" class="zoom">
<img id="header-fallback" src="yourimage.jpg" alt="" />
<video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
<a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
</div>
<div class="header-container" role="banner">
<div class="top-image test-top"></div>
<div id="header-video-container" class="zoom">
<img id="header-fallback" src="yourimage.jpg" alt="" />
<video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
<a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
</div>
<div class="header-container" role="banner">
<div class="top-image test-top"></div>
<div id="header-video-container" class="zoom">
<img id="header-fallback" src="yourimage.jpg" alt="" />
<video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
<a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
</div>
Hey guys, I need to create a video section. The main interaction is when each video div reach the screen the video should play automatically. We don't need any play/pause button. when it out of the screen it should pause automatically. And when it come again in the screen the video should start from the beginning. Can we do that ? I have attached my code here. I'm new in java script so please help. Thanks :)
