width:calc(100vw+21.25rem);/* without chat the body is 21.25rem (the size of the chat) wider */
background-color:black;
/* without chat the body is 21.25rem (the size of the chat) wider */
overflow:hidden;
width:calc(100vw+21.25rem);
transition:width0.3s;/* width changes are animated */
background-color:black;
overflow:hidden;
transition:width0.3s;/* width changes are animated */
}
}
body.with-chat{
body.with-chat{
width:100vw;/* with chat the width is the normal 100vw */
width:100vw;/* with chat the width is the normal 100vw */
}
}
#large-player{
#large-player{
position:relative;/* while this 'relative' has no impact for #large-player it is the reference point for the #small-player-container which is positioned absolute to this element */
/* while this 'relative' has no impact for #large-player it is the reference point for the */
display:flex;
/* #small-player-container which is positioned absolute to this element */
flex-grow:1;/* #large-player fills remaining space while #chat does not */
position:relative;
display:flex;
flex-grow:1;/* #large-player fills remaining space while #chat does not */
}
}
#small-player-container{/* this container is necessary for the #small-player to keep an 16:9 aspect ratio */
#small-player-container{
position:absolute;
/* this container is necessary for the #small-player to keep an 16:9 aspect ratio */
width:100%;
position:absolute;
height:0;
width:100%;
padding-top:56.25%;/* this is the trick that keeps the child in a 16:9 ratio - read more here https://www.w3schools.com/howto/howto_css_aspect_ratio.asp */
height:0;
/* this is the trick that keeps the child in a 16:9 ratio - read more here https://www.w3schools.com/howto/howto_css_aspect_ratio.asp */
padding-top:56.25%;
}
}
#small-player{
#small-player{
position:absolute;
position:absolute;
top:0;/* pin small player to the top right */
top:0;/* pin small player to the top right */
right:0;
right:0;
/* Note: the width and height property get set via script */
/* Note: the width and height property get set via script */
transition:width0.3s,height0.3s;/* width and height changes are animated */
transition:width0.3s,height0.3s;/* width and height changes are animated */
display:flex;
display:flex;
}
}
#small-player>iframe,
#small-player>iframe,
#large-player>iframe{/* the iframes always grow to the parents size */