Fluid Width Video For YouTube

by | Nov 14, 2016 | Web Development | 0 comments

My problem… getting an embedded YouTube video to automatically resize according to container sizes.

This is how you would post the embeded video:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Then add the following custom CSS:

.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%;
}

Source with more info on other video sources: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Small Things

"Start from small things." - Kengo Kuma Source: https://vimeo.com/59877756

VICE Official Trailer

Christian Bale transforms himself yet again in his latest role in VICE!

Emailing Signed Copies Of Contract And Then Signing A Copy

Playing Electronic Tag With Contracts

Iyengar: The Man, Yoga, and the Student’s Journey – Official Trailer

Focused primarily on the master teacher’s later life and impact in India before his death in 2014, Clennell’s film captures intimate moments of discussion with Iyengar, his granddaughter Abhijata, and some of the people who have incorporated Iyengar’s principles into their own rehabilitation therapies. -sadhakafilm.net

Image Editors For Mac

How to decide which image editor for Mac works for you and what options are there.

Caesarea Villa

Studio Aiko captures the magic behind Gottesman–Szmelcman Architecture’s “Caesarea Villa”.

Meet PHONOCUT, A Home Vinyl Recorder

Make quality records at home with just the push of a button!

V-Ray Showreel 2015

Wonderful V-Ray showreel featuring the works of many talents!

ADAM: The Mirror

Oats Studios brings to life the next chapter in the Adam story, made in real-time using Unity.

The Magic Moment

Peter Dahmen’s pop-up cards are amazing and his process is a reminder of the importance of problem solving one step at a time.