从我的页面中删除 YouTube 嵌入

Question

我遇到了将 Youtube 视频加载到容器中的情况。本质上，当用户不关注他们在 YouTube 中打孔的输入时 URL，它会被包裹在 iframe 中并嵌入到指定的容器中。

我的这部分代码似乎工作正常。问题出在用户从输入中删除他们的 URL 时。发生这种情况时，我需要容器恢复到原始状态。

我认为下面的代码行得通，但行不通。 .empty() 或 .remove() 似乎都没有删除 iframe 并将原始内容放回原处。

如果有人能够解决我的问题，将不胜感激。

<!-- input html -->
<div class="text-group">
    <input class="text-input js-thumb" type="text" placeholder="URL"  required>
</div>

<!-- container html -->
<div class="content-img-wrapper">
    <div class="content-img-placeholder"></div>
</div>


// jQuery
$(document).ready(function() {
    var thumbFetch = $('.js-thumb');
    thumbFetch.blur(function() {
        if(thumbFetch.length >= 1) {
            $('.content-img-wrapper').html('<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + thumbFetch.val() + '?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
        } else {
            $('.content-img-wrapper').empty();
            $('.content-img-wrapper').html('<div class="content-img-placeholder"></div>');
        }
    });
});

Answer 1

thumbFetch.length 告诉您有多少 dom 元素匹配 jQuery 选择器。相反，请尝试 thumbFetch.val().length 输入值的长度。

您可能想要的是：

var thumbFetch = $('.js-thumb');
thumbFetch.change(function() {
    if(thumbFetch.val() !== '') {
        $('.content-img-wrapper').html('<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + thumbFetch.val() + '?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
    } else {
        $('.content-img-wrapper').html('<div class="content-img-placeholder"></div>');
    }
});

从我的页面中删除 YouTube 嵌入

Removing YouTube embed from my page

html

youtube

iframe

jquery