markdown 响应式视频嵌入

Posted 2021-05-06

jQuery(document).ready(function () {
    jQuery(function () {
        jQuery('.mejs-overlay-loading').closest('.mejs-overlay').addClass('load'); //just a helper class

        var $video = jQuery('div.video video');
        var vidWidth = $video.attr('width');
        var vidHeight = $video.attr('height');

        jQuery(window).resize(function () {
            var targetWidth = jQuery(this).width(); //using window width here will proportion the video to be full screen; adjust as needed
            jQuery('div.video, div.video .mejs-container').css('height', Math.ceil(vidHeight * (targetWidth / vidWidth)));
        }).resize();
    });
});

.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
	width: 100% !important;
	height: 100% !important;
}
.mejs-container {
	padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
	max-width: 100% !important;
}
video.wp-video-shortcode {
	position: relative;
}
.mejs-mediaelement {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.mejs-controls {
	display: none;
}
.mejs-overlay-play {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
}

Responsive Video Embeds
---------------------------------
WordPress Snippet