Question

我已完成此代码，以便在视频结束时收到电子邮件选择加入表格我想知道的是我如何从onClick按钮调用此html。整个想法是单击一个按钮并将此代码调用到灯箱中。

<!DOCTYPE html>
<html>
    <head>      
        <style>
            #overlayContactForm {
                visibility: hidden;
                position: absolute;
                left: 0px;
                top: 0px;
                width:100%;
                height:100%;
                text-align:center;
                z-index: 1000;
            }
            #overlayContactForm div {
                width: 428px;
                margin: 65px;
                background-color: #fff;
                border: 1px solid #000;
                padding: 15px;
                text-align: center;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="player"></div>
        <script src="http://www.youtube.com/player_api"></script>
        <div align="center">
            <script>
                // create youtube player
                var player;
                function onYouTubePlayerAPIReady() {
                    player = new YT.Player('player', {
                        height: '390',
                        width: '640',
                        videoId: 'VhvUEhxL1DQ',
                        playerVars: {rel: 0},
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });
                }

                // autoplay video
                function onPlayerReady(event) {
                    event.target.playVideo();
                }

                // when video ends
                function onPlayerStateChange(event) {        
                    if(event.data === 0) {            
                        // $('#lightbox-panel').lightBox();
                        el = document.getElementById("overlayContactForm");
                        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : 
                        "visible";
                    }
                }
            </script>
        </div>
        <div id="overlayContactForm">
            <div>
                <h1> Mobivate</h1>
                <form class="form-inline">
                    <input type="email" class="form-control" id="exampleInputEmail3"   
                        placeholder="Email Address">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </form>
                <p> Testing email opt-in - Video/Form </p>
            </div>
        </div>
    </body>
</html>

Answer 1

听起来您希望在用户点击提交按钮时播放视频。你可以尝试这样的事情：

<form class="form-inline" onsubmit="onSubmit()">
    <input type="email" class="form-control" id="exampleInputEmail3"   
                    placeholder="Email Address">
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

然后创建一个JS函数来处理提交：

function onSubmit() {
    player.playVideo();
    return false;
}

我添加了“return false;”在这里，以便页面不会刷新，但你会想要正确处理。您可以在按钮上单击on而不是onsubmit，但这取决于您希望如何处理它。

从按钮触发javascript

1 个答案: