CODEWITHSUNDEEP
javascripthtmlyoutube
user2184718
user2184718

Reputation: 715

innerHTML from image to video not working

Right now I have a div with an image on the inside:

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

And I would like to replace it with an embedded YouTube video. This is my attempt and it is unable to work:

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

With no luck. Can anyone help me out here? Thanks!

Upvotes: 0

Views: 652

Answers (3)

user5093161
user5093161

Reputation:

Please Try this I have Edited in your code by setting just id of div and img tags

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>

Upvotes: 0

Tojo Paul Mangaly
Tojo Paul Mangaly

Reputation: 196

MediaElement YouTube API example

I think this Link will help you.

Upvotes: 0

Quynh Nguyen
Quynh Nguyen

Reputation: 3009

Use this instead for your javascript code

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

Upvotes: 2

Related Questions