Question

现在我有一个内部带有图像的div：

<div class="video-left" data-lead-id="video-left-id">
  <img src="//lh3.googleusercontent.com/W5lRXe-9BJSc2cvm4i22woLhyJ70esb7BvmepbFO-u9-0bIIGJe1yKuCovbjt1KZLl9FAESrXx3_8e7Max3vjA=s0" class="role-element leadstyle-image" style="max-width: 340px;">
</div>

我想用嵌入式YouTube视频替换它。这是我的尝试，它无法工作：

<script>
  document.getElementsByClassName("video-left").innerHTML = "<iframe width='340' height='190' src='https://www.youtube.com/embed/bbGzYWwr_WI' frameborder='0' allowfullscreen=''></iframe>"
</script>

没有运气。有人可以帮我从这里出去吗？谢谢！

Answer 1

使用此代替您的JavaScript代码

document.getElementsByClassName("video-left")[0].innerHTML = "<iframe width='340' height='190' src='https://www.youtube.com/embed/bbGzYWwr_WI' frameborder='0' allowfullscreen=''></iframe>"

Answer 2

MediaElement YouTube API example

我认为此链接可以帮助您。

Answer 3

请尝试通过设置div和img标签的id

在代码中编辑

Javascript：

<script type="text/javascript">
    function myFunction() {
        $("#f").remove();
        var x = "<iframe id=" + "\"" + "myframe" + "\"" + " src= " + "\"" + "https://www.youtube.com/embed/bbGzYWwr_WI" + "\"" + " frameborder='0'" + " allowfullscreen=''></iframe>";
        document.getElementById("mydiv").innerHTML = x;
    }
</script>

HTML：

<div id="mydiv" class="video-left" data-lead-id="video-left-id"> <img src="//lh3.googleusercontent.com/W5lRXe-9BJSc2cvm4i22woLhyJ70esb7BvmepbFO-u9-0bIIGJe1yKuCovbjt1KZLl9FAESrXx3_8e7Max3vjA=s0" id="f" class="role-element leadstyle-image" style="max-width: 340px;"></div>

innerHTML从图像到视频无法正常工作

3 个答案: