Embed responsive Youtube video

Introduction

More and more people are watching the web pages on smartphone and tablet devices, so more web developer create responsive website. I present some methods to embed responsive youtube videos.

Methods:

1. Method:

Manipulate Youtube video with CSS.

HTML:

<div class="vid">
                <iframe width="560" height="315" src="//www.youtube.com/embed/ac7KhViaVqc" allowfullscreen=""></iframe>
            </div><!--./vid -->

CSS:

.vid {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.vid iframe,
.vid object,
.vid embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

You can use this method without fornt-end framework(Bootstrap, Foundation).

Source: http://bootsnipp.com/snippets/featured/responsive-youtube-player

2. Method:

Embed Youtube video with Bootstrap(this method require Bootstrap front-end framework, you can download Bootstrap from: http://getbootstrap.com/).

The code:

<!-- 16:9 aspect ratio -->

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src=""></iframe>

</div>

<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">

  <iframe class="embed-responsive-item" src=""></iframe>

</div>

You can embed 16:9 or 4:3 video, offical doucumentation: http://getbootstrap.com/components/#responsive-embed. Learn more about Bootstrap: http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework). I use Bootstrap it many and like.

3. Method:

Embed Youtube video with Foundation(this method require Foundation front-end framework, you can download Foundation from: http://foundation.zurb.com/).

The code:

<div class="flex-video">
        <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>

Offical documentation: http://foundation.zurb.com/docs/components/flex_video.html. Learn more about Foundation: http://foundation.zurb.com/learn/about.html.

4. Method:

Use Embed Responsively, go to http://embedresponsively.com/ and build the code. Not just can embed Youtube video, but Google Maps, Vine, SoundCloud, and more...