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

Open sunilw opened this issue 8 years ago • 0 comments

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");
        });

});

Dec 14 '17 09:12 sunilw