0

私のサイトにはビデオプレーヤーがあり、ビデオの再生時にサイト全体を暗くしようとしています。すべてのコンテンツをラップするためにdivを配置し、ビデオとビデオコンテナのz-indexがdivよりも高いことを確認しました。しかし、それは私が期待したようには機能していません。

それはまた私のラッパーの配置を台無しにしています。これは私のサイトです：http ： //www3.carleton.ca/clubs/sissa/html5/video.htmlすべてをShadowdivでラップするとき。すべてが左に移動します。 ここに画像の説明を入力してください

HTML：

<body>
<div id="shadow">
<div id="wrapper">

    <a href="index.html">
        <header id="top_header">
            <h1>MacroPlay Games</h1>
        </header>
    </a>

    <nav id="topnav">
        <ul>
            <a href="index.html"><li>Home</li></a>
            <a href="about.html"><li>About</li></a>
            <a href="video.html"><li>Trailers</li></a>
            <button type="button" data-state="0" style="float:right">Cinema Mode</button>
        </ul>
    </nav>

    <div id="body_div">

        <div id="video_container">
            <video id="trailers" poster="poster.jpg">
                <source src="vLast.mp4" type="video/mp4">
                <source src="vLast.webm" type="video/webm">
            </video>
            <nav>
               <div id="controls" class="cAnimated cFadeInRight">
                    <div id="defaultBar">
                        <div id="progressBar"></div>
                    </div>
                    <button id="playButton">Play</button>
                    <button id="vol" onclick="showSlider()">Vol</button>      
                    <button id="containSlider"> 
                                <input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/></button>
                    <div id='containTime'><span id='timeDisplay'>0:00</span><span>/</span><span id='duration'>0:00</span></div>
                    <button id="full">Full</button>
                    <button id="mute">Mute</button>

               </div> 
               <div id="playlist" class="animated fadeInRight">
                    <div class="thumb" id="tb1"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div>
                    <div class="thumb" id="tb2"><img src="TbLast.jpg" onClick="changeTrailer('vLast')"/></div>
                    <div class="thumb" id="tb3"><img src="TbTwo.jpg" onClick="changeTrailer('vTwo')"/></div>
               </div>
            </nav>
        </div>



        <aside id="sidebar">
        <div id="side_events">
            <h1>News</h1>
            <ul id="events">
                <li>Half-Life 3 Release: <time>04/01/13</time></li>
                <li>Borderlands 3 Release: <time>05/29/13</time></li>
                <li>E3 2013 Starting: <time>08/11/13</time></li>
                <li>Playstation 4 Release: <time>08/31/13</time></li>
                <li>Xbox 720 Release: <time>09/01/13</time></li>
            </ul>
        </div>

            <div id="side_trailer">
                <a href="video.html"><img src="TbGow.jpg" /></a>
            </div>

        <div id="side_advert">
            <img src="http://i.imgur.com/W65o9R2.jpg" alt="Blackberry's Z10" title="Blackberry's Z10" id="advert">
        </div>                     
    </aside>

    </div>

    <footer id="footer">
        &copy; Copyright  by SimKessy
    </footer>
</div>
</div>
</body>
</html>

div（シャドウ）に関するルール：

#shadow{
    position:fixed;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    opacity:0.5;
    background-color: red; 
    z-index: 81;

}
#video_container{
    -webkit-box-flex: 1; 
    -moz-box-flex: 1;
    border:5px solid black;
    margin: 20px;
    padding: 5px;
    height: 100%;
    position: relative;
    background-color:black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    z-index:0;
}
#video_container video{
    width: 100%;
    /*height: auto;*/
    display: block;
    z-index: 0;
}

私のコード： http： //jsfiddle.net/eXJ5q/

4

2 に答える 2

2

これを試して

<div class="dim"></div>この直前にこれを追加します<div id="video_container">

次に、このcssを追加します

.dim {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}

#video_container{
       z-index: 1;
}
于 2013-02-15T00:25:06.550 に答える
1

シャドウdivをビデオコンテナの親ではなく兄弟として作成するだけで、すべてが期待どおりに機能するはずです。また、このような高い値のz-indexは必要ありません。隠そうとしている値よりも大きい値である限り、1にすることができます。

于 2013-02-15T00:39:49.413 に答える