Skip to content

edx-responsive-video by dukkha

Screenshot of edx-responsive-video

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

  • make edX video size be responsive

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;
	}
}

Reviews

No reviews yet.