2016-06-02 6 views
2

Also habe ich meine eigene Streaming-Seite mit VideoJS eingerichtet, alles was ich jetzt möchte, ist ein Chat, in diesem Fall ein Twitch Chat iframe, Seite an Seite. This is what I have now.Wie kann ich diese beiden Elemente nicht überlappen oder "kollidieren"?

Das Problem ist das Video-Element unter dem Chat-Frame. Ich möchte, dass es dort endet, wo der Chat-Frame startet, also sind beide gut miteinander verbunden. Wenn mir jemand dabei helfen könnte, wäre ich wirklich dankbar.

Da mich Stackoverflow zwingt auch in diesem Beitrag stellen Code, hier geht Ich nehme an ..

HTML:

<head> 
    <link href="//vjs.zencdn.net/4.9.0/video-js.css" rel="stylesheet"> 
<script src="//vjs.zencdn.net/4.9.0/video.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script> 

</head> 
<div id="sidebar-wrapper"> 
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/test/chat?popout=" height="100%" width="350"> 
    </iframe> 
     </div> 
<div class="wrapper"> 
    <div class="videocontent"> 
<video id="videostream" class="video-js vjs-default-skin vjs-big-play-centered vjs-fullscreen" controls width="auto" height="auto"> 
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> 
</video> 
<script> 
videojs("videostream", {}, function(){ 
// Player (this) is initialized and ready. 
}); 
videojs('videostream').ready(function() { 
    this.hotkeys({ 
    volumeStep: 0.1, 
    seekStep: 5, 
    alwaysCaptureHotkeys: true 
    }); 
}); 
</script> 
</div> 
</div> 

CSS:

.video-js {padding-top: 56.25%; 
margin-right: 20px; 
} 
.vjs-fullscreen {padding-top: 0px} 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled { 
    padding-left: 250px; 
} 

#sidebar-wrapper { 
    z-index: 10000; 
    position: fixed; 
    right: 250px; 
    width: 0; 
    height: 100%; 
    margin-right: -250px; 

    background: #000; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -250px; 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:768px) { 
    #wrapper { 
     padding-left: 250px; 
    } 

    #wrapper.toggled { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     width: 350px; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 0; 
    } 

    #page-content-wrapper { 
     padding: 20px; 
     position: relative; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
    } 

     #content 
     { 
      top: 0; 
      bottom: 0; 
      left: 0; 
      display: hidden; 
     } 

Antwort

0

Sie festgelegt haben die width von Ihrem Videobehälter zu 100%, so nimmt es die 100% der width seines Containers (die Webseite).

Sie calc Funktion können Sie das Verhalten bekommen sollte, weil Sie die width des Chat (350px) von dem 100% der width des Behälters liegen haben.

#videostream{ 
    width: calc(100% - 350px) !important; 
} 

Updated Codepen.

+1

Vielen Dank! Funktioniert perfekt!! – Shadowfied

Verwandte Themen