如何创建在 HTML 中播放 YouTube 视频的按钮?
How do I create a button that plays a youtube video in HTML?
我有以下代码。我的按钮工作正常,但是我不知道你是如何使这个功能工作的。
我的目标是创建一个按钮,单击该按钮会打开可见的 YouTube video/makes iframe。
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p><button class="w3-center center transparent_btn"
onclick="play1()">go</button></p>
</div>
</div>
</body>
<script>
function play1() {
<iframe width="560" height="315" src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}
尽管 youtube 提供了 API 来控制播放器,但我会保持简单。
首先,在你的体内添加一个 div 并给它一个你选择的 ID。
你的 play1() 函数应该是这样的:
function play1(){
var player = '<iframe width="560" height="315"
src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>';
document.getElementById('ID').innerHtml = player;
}
您需要有一个可以插入 iframe 的元素。
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p><button class="w3-center center transparent_btn"
onclick="play1()">go</button></p>
<div id="youtube-frame"></div>
</div>
</div>
</body>
<script>
function play1() {
var frame = document.getElementById("youtube-frame");
frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
}
</script>
我有以下代码。我的按钮工作正常,但是我不知道你是如何使这个功能工作的。
我的目标是创建一个按钮,单击该按钮会打开可见的 YouTube video/makes iframe。
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p><button class="w3-center center transparent_btn"
onclick="play1()">go</button></p>
</div>
</div>
</body>
<script>
function play1() {
<iframe width="560" height="315" src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}
尽管 youtube 提供了 API 来控制播放器,但我会保持简单。 首先,在你的体内添加一个 div 并给它一个你选择的 ID。 你的 play1() 函数应该是这样的:
function play1(){
var player = '<iframe width="560" height="315"
src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>';
document.getElementById('ID').innerHtml = player;
}
您需要有一个可以插入 iframe 的元素。
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p><button class="w3-center center transparent_btn"
onclick="play1()">go</button></p>
<div id="youtube-frame"></div>
</div>
</div>
</body>
<script>
function play1() {
var frame = document.getElementById("youtube-frame");
frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
}
</script>