WordPress Injected youtube videos, play on modal open, pause on modal close

I have youtube videos being injected dynamically with wordpress into multiple modals.

<div class="modal-overlay features-modal" id="modal-<?php echo $do; ?>">
    <div class="modal-bg">
        <div class="modal-close"></div>
        <div class="modal">
            <div class="videoWrapper">
                <iframe class="youtube-video" src="<?php the_sub_field('youtube_video') ?>?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
            </div>
        </div>
    </div>
</div>

What I am trying to accomplish is to get each individual youtube video to play on modal open and pause on modal close. Right now I can get the video to pause on close, but when I try to implement play on open with autoplay=1, it plays again on close (this code does not reflect the play on click).

    function modalFadeOut() {
        $('.open-modal').fadeOut("fast").removeClass("open-modal");
        $('html').css('overflow','');
    };

    // features scroll video modal 
    $(".video-button").click(function() {
        var Modal = $(this).data("modal-type");
        $("#"+Modal).fadeIn("fast").addClass("open-modal");

    });

    $('.modal-bg').click(function() {
        modalFadeOut();
        var vid = $(this).find('iframe[src*="youtube"]');
        if ( vid.length > 0 ) {
           var src = vid.attr('src');
           vid.attr('src', '');
           vid.attr('src', src);
        }
    });