When injecting videos with youtube iframe API the first slide will be invisible

If the youtube iframe api is used to create videos within the slides, then the first slide will be invisible.

This is my test case:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />

        <title>Test jQuery Cycle 2 and YouTube Iframe API</title>

        <link href="css/cycle-demo.css" rel="stylesheet"/>

        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="js/jquery.cycle2.js"></script>
        <script type="text/javascript" src="js/cycletest.js"></script>

        <style>
         main {
             position: relative ;
             margin-left: auto ;
             margin-right: auto ;
             width: 92% ;
             max-width: 800px ;
             overflow: hidden ;
         }

         .cycle-slideshow {
             display: block ;
             position: relative ;
             margin-left: auto ;
             margin-right: auto ;
             width: 92% ;
         max-width: 700px ;
             border: 3px solid #b8e9f4 ;
         }

         .cycle-slideshow img {
             max-width: 100% ;
         }

        </style>

    </head>
    <body>
        <div class="page-wrap">
            <header id="page-header">
                <h2>Testing jQuery Cycle And YouYube Iframe API</h2>
            </header>

            <div class="hidden" style="display: none">
                <div id="player_1"></div>
            </div>

            <main>
                <p>
                    <a href="#" class="prev">Previous</a>
                    <a href="#" class="next">Next</a>
                </p>
                <div id="slideshow">

                    <div class="slide">
                        <img src="http://malsup.github.io/images/p1.jpg">
                    </div>

                    <div class="slide">
            <div id="player_1"></div>
                    </div>

                    <div class="slide">
            <div id="player_2"></div>
                    </div>

            <div class="slide">
            <div id="player_3"></div>
                    </div>

                </div>
            </main>

            <script>         

            </script>

        </div>  <!-- ENDS .page-wrap -->
    </body>
</html>

jQuery(document).ready(function() {

    window.onYouTubeIframeAPIReady = function() {
        console.log("Hello from onYouTubeIframeAPIReady!");

        player1 = new YT.Player('player_1', {
            height: '390',
            width: '640',
            videoId: 'iy7cg3YJeZ0',
            events: {
            }
        });

        player1 = new YT.Player('player_2', {
            height: '390',
            width: '640',
            videoId: 'mlUMgZGFCtw',
            events: {
            }
        });

        player1 = new YT.Player('player_3', {
            height: '390',
            width: '640',
            videoId: 'ARIr42IBkZw',
            events: {
            }
        });

        /*
         * After the videos are injected apply cycle script
         */
        $('#slideshow').cycle({
            slides : ".slide",
            prev : ".prev",
            next  : ".next",
            paused : true
        });

    };

    $.getScript( "https://www.youtube.com/iframe_api" )
        .done(function( script, textStatus ) {
            console.log("We successfully got the script from YoutTube");
        })
        .fail(function( jqxhr, settings, exception ) {
            console.log("Something went wrong when we tried to get and load the youtube scripts");
        });

});

malsup / cycle2

When injecting videos with youtube iframe API the first slide will be invisible #829