Question

我有一个div，我实现了youtube iframe api，基本上我现在想要的是在视频开始前将背景颜色放在上面，当视频开始时我希望背景颜色消失，还有一件我想要的东西保留我在视频上方的文字，目前我只有视频和视频上方的文字，我该如何实现背景？

HTML

    <section class="content_section bg_fixed white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">
            <div class="container" style="position: relative;">

                <div>
                    <p>&nbsp;</p>

                    <p>&nbsp;</p>

                    <p>&nbsp;</p>


                    <div class="title-wrapper main_title text-center centered upper">
                        <h2><span class="line"></span>Simple solutions for complex problems</h2>
                    </div>

                    <div class="description4 centered">
                        <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place.&nbsp;</b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br>
Usability and simple deployment are the key words.</b></p>

                        <p dir="ltr">&nbsp;</p>

                        <p dir="ltr">&nbsp;</p>

                        <p dir="ltr">&nbsp;</p>
                    </div>
                </div>

            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>
    </section>

youtube api

  <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'kn-1D5z3-Cs',
                autoPlay: true,
                startAt: 10,
                loop: 1,
                playerVars: { 'autoplay': 1, 'controls': 0, 'rel': 0, 'modestbranding': 1, 'showinfo': 0 },


                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            player.mute();
            event.target.playVideo();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(e) {
            if (e.data === YT.PlayerState.ENDED) {
                player.playVideo();
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
    </script>

Answer 1

如何实现背景色？

尝试使用style="background: #00ff00"。当我将它添加到我的iframe时，背景颜色为绿色，然后加载了视频。

这是小提琴： http://fiddle.jshell.net/gt4otyfk/22/

视频开始时背景颜色淡出

1 个答案: