Mobile-friendly responsive design with an embedded iframe video

<div class=”embed-content”><iframe id=”player” src=”http://www.youtube.com/embed/……” height=”240″ width=”320″ allowfullscreen=”” frameborder=”0″></iframe></div>

.embed-content {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;}

.embed-content iframe,
.embed-content object,
.embed-content embed {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }

Leave a Reply

Your email address will not be published.