的innerHTML從圖像視頻不能正常工作

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>