Question

I am successfully inserting the html into the element without issue via jQuery. The issue is the object never renders/plays/show. Here is my code:

<script>
player='<object id="myPlayer" class="myPlayer">';
player+='<param name="bgcolor" value="#FFFFFF" /></object>';
$("#player").append(player);
</script>
<div id="player"></div>

The result of this code is correct with the insertion of the html element however it will never render.

How can I insert an and have it render as it would if you loaded the page with the object not being inserted via jQuery?

Answer 1

Try appending the object after the div#player is loaded (or in a ready/ondomload handler). I’m betting that your script is run before div#player loads which is why it doesn’t show.

<script>
$(document).ready(function(){
   player='<object id="myExperience" class="BrightcoveExperience">';
   player+='<param name="bgcolor" value="#FFFFFF" /></object>';
   $("#player").append(player); /* or equivalent vanilla js                 
                                 * document.getElementById("player").innerHtml = player;
                                 */

})
</script>
<div id='player'></div>