Put video in iframe with 100% width and autoplay

Question

I currently have a vimeo video embedded into my website. (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 on, and it also resizes to full width using the code above. My problem is I have 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 somebody show me how as I have tried and tried but can not seem to get it right.

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

Answer 1

Full width videos are a bit tricky. There's no one-size-fits-all, but here's the gist of it:

1. Create a wrapping DIV that has percentage-based padding-top (note: the value will change depending on your situation - you need to play with this value, get a calculator, use dev tools... you'll figure it out).
2. Position absolute the iframe within the DIV, with a top and bottom set to 0
3. Set the iframe width and height to auto

Here's some code:

<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>

If you're lazy, you can also head over to fitvidsjs which handles creating the wrapping DIV and calculating the padding for you. It's a great piece of code and works quite nicely and does not require a calculator. I can calculate padding faster than I can go download the latest fitvids, upload it to my server, and reference it in code... but that's me.