Making a Youtube Embed code auto adjust with screen width

Description

It gets annoying to change the dimensions of a YouTube video for different devices. With this bit of CSS and HTML any youtube video regardless of the setting will auto adjust with the width of the screen

It gets annoying to change the dimensions of a YouTube video for different devices. With this bit of CSS and HTML any youtube video regardless of the setting will auto adjust with the width of the screen

HTML Source Code

                        
                          <div class="videoWrapper">
    <!-- Youtube Embed Code Start -->

    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>

    <!-- Youtube Embed Code End-->
</div>

CSS Source Code

                        
                          .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

JavaScript Code

                        
                          $(".img_popup").each(function () {
    $(".img_popup").magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        removalDelay: 300,
        mainClass: 'mfp-no-margins mfp-with-zoom',
        image: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1]
        }
    });
})


Post Categories

Tags