Embedding a Video with iframe Disappears Content

programming web dev
1

For some reason, when I replace a static image with a video iframe, all the content in the <div class=“right-box”> column disappears (including any video display). But un-commenting the image and removing the video code returns everything to normal:


<body>
<div class="home-wrapper">
  <div class="left-box">
    <img src="images/homepage-welcome.jpg" width="438" height="474" alt="Welcome" />
    <div class="home-inset-left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nunc libero, dictum non blandit eu, ultrices ut arcu. Vestibulum quis turpis ut nisl ullamcorper volutpat. Sed imperdiet est vel arcu elementum semper. Phasellus bibendum nulla massa, sed gravida lectus facilisis quis.
    </div>
    <div class="home-inset-left">
      <a href="#" target="_blank"><img style="display:block;float:left;" src="images/heard-on-street.png" width="150" height="164" alt="Heard on the street" /></a> <a href="#" target="_blank"><img style="display:block;float:right;" src="images/para-usted.png" width="150" height="164" alt="Para Usted: La Comminidad hablar." /></a>
    </div>
  </div>
  <div class="right-box">
    <!-- <img src="images/homepage-100-percent.png" width="480" height="312" alt="100% Proud" /> -->
    <iframe id="ytplayer" width="480" height="380" src="http://www.youtube.com/embed/4sxAaB49IKw?autoplay=1&amp;origin=http://richmondproud.com" frameborder="0"/>
    <div class="home-inset-right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nunc libero, dictum non blandit eu, ultrices ut arcu. Vestibulum quis turpis ut nisl ullamcorper volutpat. Sed imperdiet est vel arcu elementum semper. Phasellus bibendum nulla massa, sed gravida lectus facilisis quis.
    </div>
    <div class="home-rt-col-inset">
      <a href="#" target="_blank"><img style="display:block;float:left;margin-right:15px;" src="images/focus-on-schools.png" width="150" height="277" alt="Focus on schools." /></a> <a href="#" target="_blank"><img style="display:block;float:left;margin-right:15px;" src="images/111-years.png" width="150" height="277" alt="111 Years" /></a><a href="#" target="_blank"><img style="display:block;float:left;" src="images/profiles-in-pride.png" width="150" height="277" alt="Profiles in Pride" /></a>
    </div>
    <div class="home-rt-col-inset">
      <a href="#" target="_blank"><img style="margin-top:15px;" src="images/2020-insights.png" width="480" height="58" alt="2020 Insights." /></a>
    </div>
  </div>
</div>
</body>

If I keep the static image above the video iframe, both appear, but all the remaining content disappears. So I’m guessing the issue is something to do with the iframe - but I haven’t set any styles on that frame, so what gives?