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

我希望某人能够在文本输入框中输入YouTube代码并在模糊或更改时立即更改iFrame中的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的东西是错误的，我只是不明白。任何帮助都会很棒。

来源

2017-05-27 Randy Thomas

添加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';

来源

2017-05-27 22:45:08 mickmackusa

@RandyThomas你只是想在用户输入中放置一些前导字符串和尾随字符串，并设置myIframe src？ – mickmackusa

，完美的工作。我知道我很亲密，但只是不在那里大声笑。 onchange（）也在工作。非常感谢你的帮助。 –

id'videourl'在哪里？ –

我不能完全肯定的你'试图做，但与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

来源

2017-05-27 23:29:15

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

回答

相关问题