Skip to content

XVideos Theatre Mode by butt_plung3r

Screenshot of XVideos Theatre Mode
Write a review Install Get Stylus

Details

Authorbutt_plung3r

LicenseNo License

Categoryxvideos

Created

Updated

Size1.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Enhances XVideos' Large Player by making the video player span the full width of the page, similar to YouTube's Theatre Mode.

Notes

Changelog

1.1.1

  • Don't fuck with width on non-video pages.

1.1.0

  • Refactored some styles to more reliably achieve the intended results with simpler rules. This results in a more consistent experience across browsers.
  • Opinionated change: suggested videos section is now full viewport width on big screens. To disable this, comment out styles for .related-content under optional styles.

Source code

/* ==UserStyle==
@name           XVideos Theatre Mode
@namespace      butt_plung3r
@version        1.1.1
@description    XVideos Theatre Mode (use Large Player)
@author         butt_plung3r
==/UserStyle== */

@-moz-document regexp("https?://(www\.)?xvideos.*") {
	body.video-page {
		width: 100%;
		padding: 8px 0;
	}
	
	.video-page #page {
		max-width: unset;
	}
	
	.video-page #header,
	.video-page #nav,
	.video-page .page-title,
	.video-page .video-metadata,
	.video-page #video-player-bg,
	.video-page #video-tabs,
	.video-page .related-content,
	.video-page #tabComments_bottom_page,
	.video-page #footer {
		max-width: 1280px !important;
		margin: 0 auto !important;
		padding: 0 0.5rem !important;
	}
	
	@media (min-width: 1440px) {
		.video-page #header,
		.video-page #nav,
		.video-page .page-title,
		.video-page .video-metadata,
		.video-page #video-player-bg,
		.video-page #video-tabs,
		.video-page .related-content,
		.video-page #tabComments_bottom_page,
		.video-page #footer {
			max-width: 1920px !important;
		}
	}
	
	.player-enlarged #video-player-bg {
		max-width: unset !important;
		padding: 0 !important;
	}
	
	#page.video-page .player-enlarged #video-player-bg #html5video.embed-responsive,
	#page.video-page .player-enlarged #video-player-bg #player {
		padding-bottom: min(56.25%, 99vh);
	}
	
	#html5video #hlsplayer .video-bg-pic .video-click-handler,
	#html5video #hlsplayer .video-bg-pic .video-pic {
		left: 0;
		width: 100%;
		margin: 0;
	}
	
	/* Optional Styles */
	
	.video-page .related-content {
		max-width: unset !important;
	}
}

Reviews

No reviews yet.