Making Embedded Code Responsive

Discussion in 'HTML & Website Design' started by aliii786, Jul 14, 2016.

0
  1. #1
    A few HTML elements don’t play nice with responsive layouts. One of these is the good ol’ iframe, which you may need to use when embedding content from external sources such as YouTube.

    When you embed content from an external source, the code will include an iframe:

    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
    Code (markup):
    simply replace width to 100% and the iframe content will be responsive!
     
    aliii786, Jul 14, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    You don't have to use an iframe when embedding, for instance, YouTube videos. You can just as easily use an object container, thereby avoiding the use of an iframe. You'll still need to define the width in some way, of course.
     
    PoPSiCLe, Jul 14, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,279
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #3
    Check out this jsfiddle:

    http://jsfiddle.net/EJ6jZ/22/

    Should work with iframes, embeds, objects.

    CSS:
    
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
    Code (markup):
    HTML:
    
<div class="embed-container">
  <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" allowfullscreen="" frameborder="0"></iframe>
  </div>
    Code (markup):
     
    qwikad.com, Jul 14, 2016 IP