0

On my site [ now at : http://gatecybertech.com/test but later will be moved to http://gatecybertech.com ] I can click the "Videos" link on the top right corner and get to the videos section, if I click on a video and play it, an iFrame will open, at the top right side there is a close button, its position is not quite right, how to fix that ?

The CSS looks like this :

   #modal
  {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(24, 24, 24, .6);
    z-index: 999;
  }
  #modal .content
  {
    width: 55%;
    height: 65vh;
    margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
  }
  #modal .content .yt-video
  {
    display: block;
    width: 100%;
    height: calc(100% - 45px);
  }
  #modal .content .title
  {
    box-sizing: border-box;
    height: 45px;
    line-height: 23px;
    padding: 12px 4px;
    margin: 0;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #modal .close
  {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    line-height: 36px;
    text-align: center;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    background: #366;
    cursor: pointer;
    transition: background .2s;
  }
  #modal .close:hover, #modal .close:active
  {
    background: #ef3658;
  }
  #modal.is-visible
  {
    display: flex;
  }

The html looks like this :

<div id="modal" tabindex="-1">
  <div class="content">
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

  <div class="black_overlay" onclick="closeLightBox()" style="display: block;">
    <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
      <a class="close" onclick = "return close_iFrame();"><h2>&times;</h2></a>
    </div>
  </div>
</div>

enter image description here

1
  • Maybe try setting the body margins to 0px. Also look at the padding. Aug 24, 2018 at 22:20

1 Answer 1

2

I think just re-arrange code with some changes, Try it:

  #modal
  {
/*    display: none; */
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(24, 24, 24, .6);
    z-index: 999;
  }
  #modal .content
  {
  position: relative;
    width: 55%;
    height: 65vh;
    margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
  }
  #modal .content .yt-video
  {
    display: block;
    width: 100%;
    height: calc(100% - 45px);
  }
  #modal .content .title
  {
    box-sizing: border-box;
    height: 45px;
    line-height: 23px;
    padding: 12px 4px;
    margin: 0;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  #modal .content .close
  {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    line-height: 36px;
    text-align: center;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    background: #366;
    cursor: pointer;
    transition: background .2s;
  }
    #modal .content .close a{
        font-size:25px;
    }

  #modal .close:hover, #modal .close:active
  {
    background: #ef3658;
  }
  #modal.is-visible
  {
    display: flex;
  }
   <div id="modal"  class="black_overlay" onclick="closeLightBox()"  tabindex="-1">
   <div class="content">
   <div class="close">
      <a  onclick = "return close_iFrame();">&times;</a>
    </div>
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>


</div>

2
  • Yes, this works, but I need to have the 3rd line on : display: none;
    – Frank
    Aug 25, 2018 at 0:17
  • you mean close-class ?
    – khalid J-A
    Aug 25, 2018 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.