Responsive Videos

Scripts needed

None!!! Purely HTML and CSS solution

Here's the HTML code- specific to YouTube (you can do similar code for other videos from Vimeo, etc.)

Copy and paste the code below in your HTML where you want the video to appear. Change the UNIQUECODE to the unique code for YOUR video.

<div class="videoWrapper">
     <iframe src="https://www.youtube.com/embed/UNIQUECODE?rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>

The ?rel=0 eliminates the grid of related videos after the video is complete.

The &vq=720hd forces the video player to show the video quality of 720HD which is better quality. Other options are:

• vq=small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
• vq=medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
• vq=large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
• vq=hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
• vq=hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
• vq=highres: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.
• vq=default: YouTube selects the appropriate playback quality.

Here's the CSS - copy and paste into YOUR css file

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	max-width:853px;/*same width as video itself*/
	width:100%;
	margin:0 auto;/*centers the video*/
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	max-width:853px;/*change as desired*/
	max-height:480px;/*if you change max-width, make sure the height has a ratio of 16:9*/
	width: 100%;
	height: 100%;
}