How To embed responsive youtube video

In this video tutorial you will learn how to embed responsive youtube video to be always 100% height and 100% width .


we are add this script into CSS :

.geojamalyoutube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
}
.videogeojamal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
we use this script to embed the video ; you should replace the video the youtube video ID marked in Red in this script by the ID of your video

<div class="geojamalyoutube">
<iframe class="videogeojamal" src="https://www.youtube.com/embed/SbtWQwkBVCk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


Created By: Jamal Chaaouan 2019 for Howto.geojamal.com

Comments