Skip to content

Instantly share code, notes, and snippets.

@dannyvassallo

dannyvassallo/repsonsive-vevo.md

Last active October 7, 2015 19:12
Show Gist options
  • Save dannyvassallo/81b64d685037c19f6e9d to your computer and use it in GitHub Desktop.
Save dannyvassallo/81b64d685037c19f6e9d to your computer and use it in GitHub Desktop.
Download ZIP
Responsive VEVO Embed without a framework
Raw
repsonsive-vevo.md

The CSS:

<style>
.embed-container { 
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

The HTML:

<div class='embed-container'>
	<iframe width='640' height='360' src='http://cache.vevo.com/assets/html/embed.html?video=QMGR31536628&autoplay=0' frameborder='0' allowfullscreen></iframe>
</div>

You can drop the whole thing into the DOM using this:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe width='640' height='360' src='http://cache.vevo.com/assets/html/embed.html?video=QMGR31536628&autoplay=0' frameborder='0' allowfullscreen></iframe></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment