的 HTML

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <!-- CALL TO JQUERY LIB -->
                <script
                  src="https://code.jquery.com/jquery-1.12.4.min.js"
                  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
                  crossorigin="anonymous"></script>


                <!-- CSS -->
                <style type="text/css"> 
                html, body, div, span, applet, object, iframe,
                h1, h2, h3, h4, h5, h6, p, blockquote, pre,
                a, abbr, acronym, address, big, cite, code,
                del, dfn, em, img, ins, kbd, q, s, samp,
                small, strike, strong, sub, sup, tt, var,
                b, u, i, center,
                dl, dt, dd, ol, ul, li,
                fieldset, form, label, legend,
                table, caption, tbody, tfoot, thead, tr, th, td,
                article, aside, canvas, details, embed, 
                figure, figcaption, footer, header, hgroup, 
                menu, nav, output, ruby, section, summary,
                time, mark, audio, video {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    font-size: 100%;
                    font: inherit;
                    vertical-align: baseline;
                }

                .vid {
                    width: 100vw;
                    height: 400px;
                    object-fit: cover;
                    z-index: -1;
                    position: absolute;
                    background-color: black;
                }
                #yt {
                    display: none;
                }
                #content {
                }
                p {
                    color: white;
                    font-size: 20pt;
                    text-align: center;
                    padding-top: 100px;
                }
                button {
                    width: 100px;
                    height: 30px;
                }
                </style>

                <!-- JS BUTTON -->

                <script type="text/javascript" >
                $("button").click(function () {
                    $("#content").hide();
                    $("#yt")[0].src += "?autoplay=1";
                    $("#yt").show();
                    });
                </script>


                </head>

                <body>


                <video class="vid" autoplay loop>
                    <source src="video.mp4" type='video/mp4' />
                    <img id="alternative" src="alternative.jpg" />
                </video>
                <iframe class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>
                <div id="content">
                    <p>Title</p>
                    <center>
                        <button>Click</button>
                    </center>
                </div>




                </body>
                </html>

Answer 1

您需要将您的javascript函数放在onReady事件中。当您的脚本在页面上初始化时，按钮还没有。

<script type="text/javascript" >
// this assures that everything is loaded and ready in DOM. 
    $(function(){
        $("button").click(function () {
            $("#content").hide();
            $("#yt")[0].src += "?autoplay=1";
            $("#yt").show();
        });
    });
</script>

点击自定义javascript按钮后打开Youtube iframe视频

的 HTML

1 个答案: