내 웹 사이트는 여러 개의 팝업을 사용하고 일부는 동영상을 포함합니다. 첫 번째 동영상은 다른 모든 동영상을 대체합니다. html, css 및 javacript를 사용합니다.

Question

첫 번째 팝업의 비디오는 다른 팝업의 다른 모든 비디오보다 우선합니다.

여러분이이 문제에 대해 저를 도울 수 있기를 바랍니다. 첫 번째 팝업과 코드가 다른 모든 팝업을 무시하고 모든 동영상을 대체하는 것으로 보입니다. 다음은

한 팝업의 HTML, 그것은 다른 모든 팝업에서 동일하다 :

<!-- link on homepage --> 
<div class="pure-u-1-2"> 
    <br> 
    <div class="blackbg image"> 
     <h2>If I Remember Correctly...</h2> 
     <a href="#21-ifiremembercorrectly"><img src="images/home- 
     ifiremembercorrectly.png"></a> 
    </div><br> 
</div> 
<!-- Pop-up --> 
<div id="21-ifiremembercorrectly" class="modalDialog pure-g"> 
    <div> 
     <a href="#close" title="Close" class="close">&times;</a> 
     <div id="scrollable01"> 
      <h1>If I Remember Correctly... (2017)</h1> 
      <p><i>title</i><br><br> text 
       <br><br></p> 
      <div class="videocontainer"><iframe id="vi-ifiremembercorrectly" class="video" width="960" height="540" src="https://www.youtube.com/embed/IsdtZ46oPbc? 
     rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen> 
     </iframe></div><br><br> 
      <img src="images/home-ifiremembercorrectly_black.png"><br><br> 
      <img src="images/ifiremembercorrectly-02.png"><br><br> 
     </div> 
    </div> 
</div> 

을 그리고 이것은 팝업에 대한 CSS입니다 :

.modalDialog { 
    position: fixed; 
    font-family: 'GT Cinetype Trial Light', Helvetica; 
    font-size: 15px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,1); 
    z-index: 99999; 
    opacity: 0; 
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in; 
    transition: opacity 200ms ease-in; 
    pointer-events: none; 
    color: white; 
    letter-spacing: 0px; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.modalDialog > div { 
    width: 50%; 
    height: 80%; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    background: black; 
} 

p { 
    max-width: 480px; 
} 

.close { 
    background: black; 
    color: white; 
    line-height: 25px; 
    position: absolute; 
    right: -6px; 
    text-align: center; 
    top: -5px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 25px; 
} 

.close:hover { 
    background: #000; 
} 

#scrollable01 { 
    height: 100%; 
    overflow: scroll; 
} 

마지막으로 웹 사이트 링크가 있습니다. 이것은 제가 생각하기에 가장 도움이 될 것입니다 : http://www.jurritvanderploeg.nl/

미리 감사드립니다! 내가 도움을 청하고있는 모든 것이 분명하기를 희망한다.

Answer 1

그것은 당신이 투명 배경색을 변경하거나 작업을해야 그것을 제거하는 경우가 배경에 모든 동영상을 우선 적용하므로,

.modalDialog { 
    position: fixed; 
    font-family: 'GT Cinetype Trial Light', Helvetica; 
    font-size: 15px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,1); 
    z-index: 99999; 
    opacity: 0; 
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in; 
    transition: opacity 200ms ease-in; 
    pointer-events: none; 
    color: white; 
    letter-spacing: 0px; 
} 

당신이 검은 색으로 배경을 설정 CSS에 의해 발생 될 수 있습니다 뒷면의 모든 동영상이 표시됩니다.