Click here to Skip to main content
15,121,414 members
Articles / Web Development / HTML5
Tip/Trick
Posted 21 Aug 2014

Tagged as

Stats

21.3K views
3 bookmarked

Embed responsive Youtube video

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
21 Aug 2014CPOL
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.

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:

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

CSS:

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:

HTML
<!-- 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...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Magyar András
Student
Hungary Hungary
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --