blob: f04c53e4d6cda02db856e055c28265f840101201 [file] [log] [blame]
#videoList {
margin: 0px auto;
text-align: left;
}
/* EOF demo */
#videoList .videobox {
border: 1px solid #fff;
color: #fff;
display: inline-table;
font-weight: bold;
height: 160px;
line-height: 160px;
margin: 10px 5px;
text-align: center;
text-decoration: none;
width: 300px;
background: #fff;
padding: 10px;
-webkit-box-shadow: 0px 1px 2px #aaa;
-moz-box-shadow: 0px 1px 2px #aaa;
box-shadow: 0px 1px 2px #aaa;
}
.videothumb{ }
.videothumblink {
width: 100%;
height: 100%;
display: block;
}
.videoboxtitle {
display: block;
margin: 0;
padding: 10px 2px 0;
line-height: 16px;
/*border: 1px solid #ddd;*/
overflow: hidden;
position: relative;
}
.videoboxtitlelink {
font-size: 13px;
height: 50px;
display: block;
position: relative;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
overflow: hidden;
text-align: center;
}
/* media list title overlay */
#videoList .videothumb .videoplay {
visibility: visible;
background: rgba(0, 0, 0, .3);
}
/* On hover actions */
#videoList .videothumb:hover .videoplay {
visibility: hidden;
}
/* === popup media player === */
/* background overlay */
#videoPlayer {
display: none;
}
#videoPlayerblock {
background: rgb(248, 248, 248);
position: relative;
width: 100%;
height: 100%;
z-index: 20;
left: 0;
top: 10px;
padding: 10px;
-webkit-box-shadow: 0px 1px 2px #aaa;
-moz-box-shadow: 0px 1px 2px #aaa;
box-shadow: 0px 1px 2px #aaa;
}
.videobox {
display: inline-block;
}
.videobox-title{}
.videobox-title-link{}
/* video player */
#videoPlayerblock .videoview {
position: relative;
background: #000;
width: 100%; /* width of YouTube Player */
height: 400px; /* height of YouTube Player */
/*left: calc(50vw - 280px); !* 280 is .5(560), centers x axis*!*/
/*top: calc(50vh - 157px); !* 157 is .5(315), centers y axis*!*/
margin: 0;
border: 1px solid #000;
max-width: 730px;
}
#videoPlayerblock iframe {
width: 100%;
height: 100%;
}
.title-heading {
font-size: 22px;
}
.fullwidth {
width: 100%
}
@media (max-width: 960px){
#videoPlayerblock .videoview {
height: 260px;
margin:0 auto;
max-width: 460px;
}
#videoList .videobox {
height: 140px;
line-height: 140px;
margin: 10px 4px;
max-width: 260px;
padding: 8px;
width: 100%;
}
}
@media (max-width: 767px) {
#videoPlayerblock {
margin-bottom: 20px;
}
#videoList .videobox {
margin: 10px 0;
}
#videoPlayerblock .videoview {
height: 270px;
margin: 0 auto;
max-width: 480px;
}
}
@media (max-width:480px){
#videoList .videobox {
display: table;
margin: 10px auto;
height: 130px;
line-height: 130px;
width: 240px;
}
#videoPlayerblock .videoview {
width: 100%;
height: inherit;
margin: 0 auto;
max-width: 290px;
}
.videoboxtitlelink {
font-size: 13px;
height: initial;
text-align: left;
}
}