youtube iframe appears only when mouseover

I have an iframe containing a youtube video, inside bootsrap’s modal. when opening the modal, the place of the iframe remains empty, and the video appears only when hovering with the mouse above it. Once appeared, the video stays there.

Any idea why is this happening?

attaching code of the modal, just in case:

<div id='Hanale_modal' class='modal fade autoModal' role='dialog'>  <div class="modal-dialog modal-lg" style='position:absou'>

    <!-- Modal content-->
    <div class="modal-content autoModal" style='margin:auto;'>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">

        <div class='modal_upper_part'>
              <p>
            <iframe class='modal_youtube hide_on_collapsed' src='https://www.youtube.com/embed/Ksm4gS48Ov0' frameborder='0' allowfullscreen ></iframe > <h1 class='modal_title'>שמלת השבת של חנהל'ה</h1><h3 class='modal_sub_title'r>לגילאי 3 עד 6 מוכרת ע"י סל תרבות ארצי וע"י תרבות לישראל, בהשראת ספרו של יצחק דמיאל</h3>          
          </div>

          <div class='hide_on_full_view'>
            <img src='/bambola/site/assets/files/1053/strip_hanale.jpg' alt='' width='100%'>            <div style='margin-top:20px;'>
            <a target='blank' href='https://www.youtube.com/watch?v=Ksm4gS48Ov0'> לצפייה בסרטון של ההצגה
              <img src='/bambola/site/templates//resources/youtube_icon.png' alt='' width='40px'>
            </a>
          </div>
          </div>

        </div>

        <div>
        </div>

      <div class="modal-footer">
        <img src='/bambola/site/templates/resources/sal_trabut01.jpg' alt='' height='50px'>


      </div>
    </div>
  </div>

  </div>


Source: html

Leave a Reply