madebykind/fitit

Tool to make embedded iframes, object, etc become responsive. AKA FitVids without the jQuery dependency.

#fitIt A dependancy free, utra-slim tool for fluid width video (and other) embeds.

##Usage

    fitIt(<selector>)

All elements that match the selector will be made responsive and full width within it's container...

    fitIt('[src*="youtube.com"]');

<iframe width="560" height="315" src="//www.youtube.com/embed/MG9-y2t2ZLI" frameborder="0" allowfullscreen></iframe>

---

Including any asynchronously loaded nodes

    fitIt('[src*="youtube.com"]');

    document.querySelector('.async-demo__btn').addEventListener('click', function (clickEvt) {

        var container = clickEvt.target.parentElement,
            i = document.createElement('iframe');

        i.src = '//www.youtube.com/embed/ImlzsxHbTRQ';
        container.appendChild(i);
        container.removeChild(clickEvt.target);
    });

Load Video

---

Multiple selectors can be used...

    fitIt('[src*="youtube.com"], [src*="player.vimeo.com"]');

<iframe src="//player.vimeo.com/video/1084537" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

---

Even multiple calls.

    fitIt('[src*="youtube.com"]');
    fitIt('object embed');

---

Before the element...

    <script>
    fitIt('[src*="youtube.com"], [src*="player.vimeo.com"]');
    </script>

    <iframe width="560" height="315" src="//www.youtube.com/embed/MG9-y2t2ZLI" frameborder="0" allowfullscreen></iframe>

---

or after it...

    <object data="" type="">
        <embed src="" type=""></embed>
    </object>

    <script>
    fitIt('object embed');
    </script>