在文本输入中输入代码时更改 Iframe YouTube 视频

Question

我希望有人能够在文本输入框中输入 YouTube 代码，并在模糊或更改时立即更改 iFrame 中的 YouTube 视频。

这是我有的东西不起作用...

<input type="text" name="videourl" value="$videourl" style="width:400px;" onchange="newVideo()" />

<iframe id="myIframe" width="230" height="129" src="https://www.youtube.com/embed/$videourl?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
function newVideo() {
    var select = document.getElementById('videourl');
    document.getElementById('myIframe').src.select;
}
</script>

我认为我的 JavaScript 中有些地方是错误的，我就是想不通。任何帮助都会很棒。

Answer 1

将 id 属性添加到您的输入标签：

id="videourl"

将用户输入转移到 src 字符串中的适当位置...

var select=document.getElementById('videourl').value;
document.getElementById('myIframe').src='https://www.youtube.com/embed/'+select+'?rel=0&amp;showinfo=0';

Answer 2

我不完全确定你要做什么，但是 jQuery 你可以使用类似的东西：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
     $(document).ready(function(){
       $('#yt_id').on('input', function() {
          $("#myIframe").attr("src","https://www.youtube.com/embed/"+$('#yt_id').val()+"?rel=0&amp;showinfo=0");
       });
     });
</script>

<input maxlength="11" type="text" id="yt_id" name="videourl" value="_g-dyXWUov8" style="width:400px;" />
<iframe id="myIframe" width="230" height="129" src="https://www.youtube.com/embed/Q1rhoq77dcY" frameborder="0" allowfullscreen></iframe>

jsfiddle demo

在文本输入中输入代码时更改 Iframe YouTube 视频

Change Iframe YouTube Video On Entering Code In Text Input

javascript

iframe

src