YouTube Iframe Assistant

Make all Iframe videos fully responsive and scale with the screen.

This project began as a YouTube centered helper, but does support the following video embeds:

• YouTube
• Vimeo
• Potentially others, no more tested

If you have embed types that you would like to request be tested, please submit an issue here

Requirements

• jQuery - v1.12.4 ^
• jQuery.actual - latest

If using webpack

require('jquery.actual');
require('youtube-iframe-assistant');

If using separated scripts

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<script src="/path/to/youtube-iframe-assistant.js"></script>

Getting Started

Simply call the youtubeIframeAssistant function and all iframes will be automatically set to scale responsively

$(function () {
 
    youtubeIframeAssistant();
 
});

You can pass in different settings to tweak your criterea and functionality

$(function () {
 
    youtubeIframeAssistant({
        useBootstrapModal: true
    });
 
});

You can either surround your iframe with a figure tag, or allow the plugin to automatically wrap the iframe if it is not already the parent element.

<iframe width="560" height="315" src="https://www.youtube.com/embed/RQ2BHsL4C0I?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
 
---- OR ----
 
<figure>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/RQ2BHsL4C0I?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</figure>

Bootstrap Modals

This plugin can be used along side Bootstrap's Modals with no adjustments, and default styles can be toggled on/off.

<div class="btn btn-primary video-toggle" data-toggle="modal" data-target="#target-modal">Open Video</div>
 
<div id="target-modal" class="modal fade video-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <iframe width="560" height="315" src="http://youtube.videosrc" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Settings

| Setting | Type | Default | Description | | ------- | ---- | ------- | ----------- | | useBootstrapModal | boolean | false | Set this to true if using Bootstraps modals as video popups | | startVideoOnModalOpen | boolean | true | If using Bootstrap Modals, start the video when the modal opens, based on videoTogglesClass | | stopVideoOnModalClose | boolean | true | If using Bootstrap Modals, stop the video when the modal closes, based on the videoModalsClass | | useIframeClass | boolean | false | Change the scope of the iframes effected down to a class | | iframeClass | string | ".iframe-video" | Class of the iframes to be scoped to | | videoTogglesClass | string | ".video-toggle" | The class that will be watched in order to trigger the video play | | videoModalsClass | string | ".video-modal" | The class that will be used to watch for modal closes to stop the video contained |