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;
}
Vielen Dank! Funktioniert perfekt!! – Shadowfied