Я хочу, чтобы кто-то мог вводить код YouTube в поле ввода текста, а при размытии или при его изменении мгновенно менять видео YouTube в iFrame.

Вот то, что у меня не работает ...

<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 что-то не так, я просто не могу понять это. Любая помощь будет отличной.

0
Randy Thomas 28 Май 2017 в 01:42

2 ответа

Лучший ответ

Добавьте атрибут 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'; 
1
mickmackusa 27 Май 2017 в 23:34

Я не совсем уверен, что вы пытаетесь сделать, но с 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

1
Pedro Lobito 27 Май 2017 в 23:29