如何通过input标签实现YouTube视频iframe嵌入？运行异常怎么排查？

错误原因 #

• 核心逻辑错误：获取input元素后未读取输入值，document.getElementById('url')仅返回input的DOM对象，直接作为iframe的src属性值会被转为[object HTMLInputElement]，无法正常加载视频。
• 细节疏漏：代码缺少输入非空校验，用户未填内容点击按钮会生成无效空iframe。

修复后代码 #

HTML部分（body内） #

<input id="url" type="url" placeholder="Video url">
<button onclick="emb()">Embed video</button>
<div id="link"></div>

JavaScript部分 #

function emb(){
    var iframeContainer, iframeHtml;
    // 读取input的实际输入值
    var videoUrl = document.getElementById('url').value;
    iframeContainer = document.querySelector("#link");
    // 非空校验避免无效请求
    if(!videoUrl) {
        alert('请先输入视频链接');
        return;
    }
    iframeHtml = `<center><iframe width="480" height="360" src="${videoUrl}"></iframe></center>`
    iframeContainer.innerHTML = iframeHtml;
}

内容的提问来源于stack exchange，提问作者Hemant