iframe not showing on website after publishing

My iframe works well in the development environment. But after publishing the iframe is not working. I have attached the code.

<iframe id="ytVideo" src="https://www.youtube.com/embed/XACzyRmQm54"></iframe>
    
    <script type="text/javascript">
document.getElementById("card1").onclick = function() {
    document.getElementById('ytVideo').src = 
    "https://www.youtube.com/embed/XACzyRmQm54";
};
document.getElementById("card2").onclick = function() {
    document.getElementById('ytVideo').src = 
    "https://www.youtube.com/embed/v5pg_Nw1lak";
};
document.getElementById("card3").onclick = function() {
    document.getElementById('ytVideo').src = 
    "https://www.youtube.com/embed/4fZU39FM-zg";
    
};
document.getElementById("card4").onclick = function() {
    document.getElementById('ytVideo').src = "https://www.youtube.com/embed/fZftnqXlU4g";
    
};
</script>

Content Attribution

This content was originally published by Meenakshi Sundaram at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.