*{ margin:0; padding:0; -webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0); outline:none; font-family:'Roboto', Arial, Helvetica, sans-serif; } html{ height:100%; } body{font-family:'Cuprum','sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;background-color:#14141a;font-size:14px;color:#FFF;-moz-text-shadow: 1px 1px 0 #000;-webkit-text-shadow: 1px 1px 0 #000;text-shadow: 1px 1px 0 #000;min-height: 100%;min-width: 320px;} .video-info { bottom: 5%; width: 100%; position: absolute; z-index: 12; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; font-weight: bold; } .channel-info{ top: 1px; width: 100%; position: absolute; z-index: 12; font-weight: bold; } .video-info span { flex-grow: 1; text-align: center; margin: 0px 1px 0px 1px; font-size: large; } .video-info a, .channel-info a { display: block; position: relative; width: 100%; height: 100%; line-height: 30px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #ffffff; text-decoration:none; background: rgba(0, 0, 0, 0.6); } .video-info a:hover, .channel-info a:hover{ color: #FFF; text-decoration:none; background: rgba(0, 0, 0, 0.9); } /* related videos in player */ .player-related-videos { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 5px 10px 30px 10px; background: rgba(0, 0, 0, 0.31); overflow: hidden; } .player-related-videos .player-related-videos-container { position: relative; width: 100%; height: 100%; overflow: hidden; text-align: center; } .player-related-videos .player-related-videos-item { position: relative; display: inline-block; vertical-align: middle; margin-top: 5px; } .player-related-videos .player-related-videos-item .title { display: none; position: absolute; left: 0; top: 0; right: 0; height: 52px; overflow: hidden; text-align: left; padding: 5px; color: #ffffff; background: -moz-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px); background: -webkit-gradient(linear, left top, left bottom, color-stop(0px, rgba(12, 12, 12, 0.8)), color-stop(50px, transparent)); background: -webkit-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px); background: -o-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px); background: -ms-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px); background: linear-gradient(to bottom, rgba(12, 12, 12, 0.8) 0px, transparent 50px); } .player-related-videos .player-related-videos-item .duration { display: none; position: absolute; bottom: 5px; right: 5px; color: #ffffff; background: rgba(12, 12, 12, 0.8); padding: 2px 5px; } .player-related-videos .player-related-videos-item:hover .title, .player-related-videos .player-related-videos-item:hover .duration { display: block; } } @media screen and (min-width: 1200px){ .video-info{ bottom: 4.5%; } } @media screen and (max-width: 1200px){ .video-info{ bottom: 5.5%; } } @media screen and (max-width: 800px) { .video-info { bottom: 8%; } } @media screen and (max-width: 550px){ .video-info{ bottom: 10%; } .video-info a { font-size: 12px; line-height: 20px; } } @media screen and (max-width: 320px){ .video-info{ bottom: 15%; } }