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

Spider-Man Black 3 – Speed Painting by Manlio Noto

Sweet Speed Painting of Black Spider-Man by Manlio Noto.

Akismet?

Basically Akismet is an awesome comment spam filtering service Wordpress websites or blogs. Should you use it? Nothing to lose if you do. Does it cost? There is a free option available for personal and non-business sites. And there are paid options for business...

In Myanmar

Visual Effects Artist Firdaus Hashim travels to Myanmar and teases us with it’s beauty.

The Apple Store

I can’t remember exactly when it happened but eventually Apple had made a symbol for itself. The symbol was this cool looking glass cube which had “hey look at me - I am the future” written all over it. Or something of that nature. The symbol was, and still is, an...

What Do We Live For…

Everyone’s life story has an opportunity to become a parable.

Meet Vela Blue!

I’ve never heard William Tell’s Overture and the Super Mario Bros. jam played like this before!

Eclipse 2017: One Nation Under The Sun

Moving video of the 2017’s Solar Eclipse experience.

How to Disable Autoplay in VLC Media Player for VR Photos?

Unfortunately, there is no setting that I know of that does this. So a workaround is to have the VR photo pause after playback. This is very helpful if you view VR photos as I do for reference and would much rather not have the VR photo close down after playback. To...

Meet Waris Kareem, An 11-Year Old Artist

“From a makeshift studio in a poor neighbourhood in Lagos, Waris Kareem produces incredibly life-like works of art” – CGTN Africa

Meet Archisketch, The World’s Simplest Interior Design Solution

“Archisketch offers a revolutionary way to communicate interior design.” – Archisketch, Inc.