Since we are working on the series of CSS only things to provide alternatives for JavaScript & jQuery. We are here with our next article, where we will create YouTube video gallery without using CSS.
Video gallery is a very common features of our website and for this we use YouTube videos. YouTube is very popular social media platform for videos. To implement the video gallery we generally use jQuery or JavaScript.
HTML Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.posrel{position:relative;}
.posrel .posoverlay{position:absolute; top:0; left:0; right:0; bottom:0;}
</style>
<div class="row cg2019-video">
<div class="col-md-12">
<div class="video-full">
<iframe width="100%" height="450" id="iframevideo" name="iframevideoa" src="https://www.youtube.com/embed/uiy7MSNZ008" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="clearfix"> </div>
<div class="video">
<div class="col-md-3 posrel">
<a href="https://www.youtube.com/embed/_KWjJkuEfpw?autoplay=1" target="iframevideoa" class="posoverlay"></a>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/_KWjJkuEfpw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-md-3 posrel">
<a href="https://www.youtube.com/embed/7V-wiXbdxKA?autoplay=1" target="iframevideoa" class="posoverlay"></a>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/7V-wiXbdxKA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-md-3 posrel">
<a href="https://www.youtube.com/embed/crAAA7OG4MI?autoplay=1" target="iframevideoa" class="posoverlay"></a>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/crAAA7OG4MI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-md-3 posrel">
<a href="https://www.youtube.com/embed/FtXtZsd2FtQ?autoplay=1" target="iframevideoa" class="posoverlay"></a>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/FtXtZsd2FtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
How it works!
We all the know the target attribute of anchor tags. Generally we use target attribute “_blank” to open link in new window, we also use this target attribute in JavaScript as “_self”.
Anchor tag can also target the iframe, just put your iframe name in your anchor target attribute and anchor tag link will be visible to your iframe src.