Start to fix video layout
--HG-- branch : kf-video-layout
This commit is contained in:
@@ -1,6 +1,10 @@
|
|||||||
div.course-wrapper {
|
div.course-wrapper {
|
||||||
@extend .table-wrapper;
|
@extend .table-wrapper;
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
div#accordion {
|
div#accordion {
|
||||||
@extend .sidebar;
|
@extend .sidebar;
|
||||||
|
|
||||||
@@ -112,88 +116,5 @@ div.course-wrapper {
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.video-wrapper {
|
|
||||||
float: left;
|
|
||||||
width: 640px;
|
|
||||||
min-height: 620px;
|
|
||||||
|
|
||||||
iframe#html5_player {
|
|
||||||
border: none;
|
|
||||||
display: none;
|
|
||||||
height: 390px;
|
|
||||||
width: 640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
ul {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-top: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
div {
|
|
||||||
&:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div#slider {
|
|
||||||
margin: -14px 0 10px 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#vidtime {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#video_speeds {
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
span {
|
|
||||||
&:hover {
|
|
||||||
color: $mit-red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.subtitles {
|
|
||||||
width: 220px;
|
|
||||||
margin-left: 20px;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
&.current {
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $mit-red;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div:empty {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
@import "leanmodal";
|
@import "leanmodal";
|
||||||
|
|
||||||
// pages
|
// pages
|
||||||
@import "courseware";
|
@import "courseware", "courseware-video";
|
||||||
@import "textbook";
|
@import "textbook";
|
||||||
@import "profile";
|
@import "profile";
|
||||||
@import "wiki-create", "wiki";
|
@import "wiki-create", "wiki";
|
||||||
|
|||||||
14
video.html
14
video.html
@@ -1,12 +1,14 @@
|
|||||||
|
|
||||||
<div class="video-wrapper">
|
<div class="video-wrapper">
|
||||||
<div id="ytapiplayer">
|
<div class="video-player">
|
||||||
|
<div id="ytapiplayer">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TODO(Ernie/Kyle) move styles to css -->
|
||||||
|
<iframe id="html5_player" type="text/html" frameborder="0">
|
||||||
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- TODO(Ernie/Kyle) move styles to css -->
|
|
||||||
<iframe id="html5_player" type="text/html" frameborder="0">
|
|
||||||
</iframe>
|
|
||||||
|
|
||||||
<section class="video-controls">
|
<section class="video-controls">
|
||||||
<ul>
|
<ul>
|
||||||
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
|
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
|
||||||
@@ -19,8 +21,6 @@
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ol class="subtitles">
|
<ol class="subtitles">
|
||||||
<li id=stt_n5><div id=std_n7 onclick="title_seek(-7);"></div></li>
|
<li id=stt_n5><div id=std_n7 onclick="title_seek(-7);"></div></li>
|
||||||
<li id=stt_n4><div id=std_n6 onclick="title_seek(-6);"></div></li>
|
<li id=stt_n4><div id=std_n6 onclick="title_seek(-6);"></div></li>
|
||||||
|
|||||||
Reference in New Issue
Block a user