Commit 15e86e13 authored by Laura Kalbag's avatar Laura Kalbag

Use has-captions class to position playback buttons in centre on wider viewports. Fixes #8

parent 9b578ed1
......@@ -518,7 +518,12 @@
justify-content: center;
align-items: center;
align-content: center;
padding-left: 140px;
padding-left: 146px;
}
}
@media only screen and (min-width: 620px) {
.flexbox.flexwrap .has-captions .px-video-playback-buttons {
padding-left: 180px;
}
}
.flexbox.flexwrap .px-video-controls button {
......
......@@ -45,6 +45,7 @@ function InitPxVideo(options) {
// Display captions container and button (for initialization)
function showCaptionContainerAndButton(obj) {
obj.captionsBtnContainer.className = "px-video-captions-btn-container show";
obj.captionsContainer.parentNode.parentNode.className = "has-captions";
if (obj.isCaptionDefault) {
obj.captionsContainer.className = "px-video-captions show";
obj.captionsBtn.setAttribute("checked", "checked");
......
......@@ -498,7 +498,11 @@
justify-content center // stick buttons/inputs to left/right edges with excess space distributed between
align-items center // horizontally centre rows inside container
align-content center // horizontally centre all content inside container when there are multiple rows
padding-left 140px
padding-left 146px
.has-captions .px-video-playback-buttons
@media only screen and (min-width: 620px)
padding-left 180px
.px-video-controls button
margin 0 5px
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment