How to Make Embed YouTube Video Responsive

Using Embedded Video Responsive is simple. You will first need to find what you are embedding video. You need the simply copy of the URL of embedding video.In this article, We will show you how to make YouTube videos responsive in your site, using simple CSS.

YouTube Embed Code

Paste the Embed Code into your web page.

<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>

view raw iframe hosted with ❤ by GitHub

Change Embed Code

Add div around the Embed code.

	<div class="video-responsive">
	<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
	</div>

view raw responsive_video2 hosted with ❤ by GitHub

CSS

Paste the CSS Code in your Stylesheet

	.video-responsive{
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	height:0;
	}
	.video-responsive iframe{
	left:0;
	top:0;
	height:100%;
	width:100%;
	position:absolute;
	}

view raw responsive_video hosted with ❤ by GitHub

Your embed YouTube videos will be fully responsive.