- make edX video size be responsive
edx-responsive-video by dukkha
![Screenshot of edx-responsive-video](https://userstyles.world/preview/157/0.jpeg)
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;
}
}