如何使用javascript/jquery根据值更改iframe的src属性？

我有一个大于20MB的网页太大了，问题是youtube视频每个都有约500KB！我想使用HTML5选择选项列出30多个视频。该值是youtube视频ID。然后用户从下拉选项中选择所需的视频。然后视频加载到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>

这是工作模板，但我想用所选选项值替换src字符串中的nlD9JYP8u5E。这能做到吗

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

---

在文章中添加id

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事件一样从值中给出。

这可以通过JavaScript实现

此脚本所做的是在单击按钮时调用提交的函数，此函数将更改视频源

我没有使用，因为这会重新加载页面，我不知道如何防止这种情况

<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>

在.replace中使用regex来更改iframe的src属性。在jquery中，我在select元素的更改事件侦听器中使用的元素的.attr change属性

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

$dynamic\u select.change函数{ var val=$this.val； $iframe.attrsrc，functioni，a{

---

返回a.replace/？您可以使用regex更改它您有任何代码吗？只显示html