Geek Answers Handbook

Put video in iframe with 100% width and auto play

I currently have a vimeo video embedded in my site. (code below)

<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

As you can see, I have autoplay, and it also resizes to full width using the code above. My problem is that I just created a video on wideo.co and I need it to react in exactly the same way as the vimeo iframe above. Below is my Wideo iframe, can someone show me how I tried and tried, but cannot seem to be right.

<iframe width="540" height="310" src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500" frameborder="0"></iframe>
+4
source share
2 answers

Full-width video is a bit more complicated. There is no single size, but here's the gist:

  • DIV padding-top ( : - , , dev... ).
  • absolute iframe DIV, , 0
  • iframe auto

:

<style>
.video-wrapper {
    position: relative;

    /* 
     Play with this value until you get the right aspect ratio.
     Note: Percentage based padding is calculated by the width of the containing element.
     Note 2: This value will be different for every website and/or media query...
    */
    padding-top: 45%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* this will override the width=""/height="" properties defined on the iframe */
    width: auto;
    height: auto;
}
</style>

<div class="video-wrapper">
    <iframe src="..."  width="540" height="310"></iframe>
</div>

, fitvidsjs, DIV . . , , ... .

+7

div, width = "100%" iframe. .

<div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1" width="100%" height="310" frameborder="0"></iframe>
</div>
0

More articles:


All Articles