Как изменить атрибут src iframe на основе значения <select>, используя javascript / jquery?

Question

У меня есть веб-страница размером> 20 МБ (слишком большая), и проблема в том, что видео на YouTube составляют ~ 500 КБ каждое!Я хочу использовать опцию выбора HTML5, чтобы перечислить более 30 видео.Значение - идентификатор видео YouTube.Затем пользователь выбирает из выпадающих опций желаемое видео.Затем видео загружается в iframe.

<form>
    <select id="dynamic_select">
        <option value="" selected>Pick a Key and Peele youtube video</option>
        <option value="pSDTmJtE-Bc">Little Homie</option>
        <option value="Dd7FixvoKBw">Substitute Teacher</option>
        <option value="iGAMbNKcN1U">Fronthand Backhand</option>
    </select>
</form>

Это рабочий «шаблон», но я хочу заменить «nlD9JYP8u5E» в строке src выбранным значением опции.Можно ли это сделать?

<article>
    <iframe src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"></iframe>
</article>

Answer 1

Это можно сделать с помощью JavaScript.

При нажатии кнопки вызывается функция submitted, и эта функция изменяет источник видео.

Iя не использую <input type="submit">, поскольку это перезагружает страницу, и я не уверен, как это предотвратить.

<script>
function submitted(){
    link = document.getElementById("dynamic_select").value;
  document.getElementById("video").src = "https://www.youtube.com/embed/"+link+"?rel=0&amp;showinfo=0";
}
</script>
<form onsubmit="return false;">

<select id="dynamic_select">
<option value="" selected>Pick a Key and Peele youtube video</option>
<option value="pSDTmJtE-Bc">Little Homie</option>
<option value="Dd7FixvoKBw">Substitute Teacher</option>
<option value="iGAMbNKcN1U">Fronthand Backhand</option>
</select>
<button onclick="submitted()">Submit</button>
</form>

<article>

<iframe id="video" class = "youtube" src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"> 
</iframe>

</article>

Answer 2

Используйте регулярное выражение в .replace() для изменения src атрибута iframe.В jquery атрибут .attr() change элемента, который я использовал в change прослушивателе событий элемента select

$("#dynamic_select").change(function(){
    var val = $(this).val();
    $("iframe").attr("src", function(i, a){
        return a.replace(/(?<=embed\/)[^?]+/, val);
    });
});

$("#dynamic_select").change(function(){
    var val = $(this).val();
    $("iframe").attr("src", function(i, a){
        return a.replace(/(?<=embed\/)[^?]+/, val);
    });
    console.log($("iframe").attr("src"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="dynamic_select">
    <option value="" selected>Pick a Key and Peele youtube video</option>
    <option value="pSDTmJtE-Bc">Little Homie</option>
    <option value="Dd7FixvoKBw">Substitute Teacher</option>
    <option value="iGAMbNKcN1U">Fronthand Backhand</option>
  </select>
</form>
<article>
  <iframe src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"> 
</iframe>
</article>

Answer 3

добавить идентификатор в вашу статью (

let target=document.getElementById('viewvideo'), myiframe=document.createElement('iframe'); myiframe.src='the url i want to display'; target.innerHTML='';/** empty the previous one then set content with current iframe*/ target.appendChild(myiframe);

Конечно, строка 'URL, который я хочу отобразить' будет дана из значения, как событие onChange.