- make edX video size be responsive
edx-responsive-video by dukkha
Details
Authordukkha
LicenseNo License
Categoryedx,ossu
Created
Updated
Size1.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
it used the CSS property aspect-ratio
,
you should make sure your chrome version larger than 88.
Source code
/* ==UserStyle==
@name edx-responsive-video
@namespace edx.org
@version 1.0.0
@description make edX video size be responsive
@author dukkha
==/UserStyle== */
@-moz-document domain("edx.org") {
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: min(1800px, 100%);
}
.unit-container {
max-width: none;
}
.course-wrapper .course-content .xblock.xblock-student_view-vertical,
.course-wrapper .course-content .xblock.xblock-public_view-vertical,
.course-wrapper .courseware-results-wrapper .xblock.xblock-student_view-vertical,
.course-wrapper .courseware-results-wrapper .xblock.xblock-public_view-vertical {
max-width: none;
}
.xmodule_display.xmodule_VideoBlock .video .tc-wrapper {
position: relative;
display: flex;
aspect-ratio: 1654/855;
justify-content: space-between;
}
.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper {
max-height: none;
}
.xmodule_display.xmodule_VideoBlock .video .tc-wrapper::after {
display: none;
}
.xmodule_display.xmodule_VideoBlock .video .video-wrapper {
float: none;
margin-right: 0;
width: calc(100% - 330px);
}
.sequence-container {
width: 100%;
max-width: none !important;
}
.xmodule_display.xmodule_VideoBlock .video .subtitles {
float: none;
width: 300px;
}
.wrapper-downloads {
margin-top: 20px;
}
}