Can't set the size of the video player

[Swissmiss]

Hello. I'm trying to publish an mp4 video on a website using the video/audio module. I set the player size to the size of the video, but on the website, the width adjusts to the width of the column the video is in, hence the video is way to large. Anything I've missed? Any help will be appreciated.

[Lupus]

Hello,

Do you use a reset CSS or any framework who can overload the attributes height and width by adding !important or max-with / min-width property ?

[Swissmiss]

Hi. I'm using the free rocksolid template, so I don't know. Where would that be if there was anything like this?

[Lupus]

Look at your dev console in your browser to see if there is CSS property

[Swissmiss]

Probably. Not sure if I'm looking at the right thing, but this is probably it (see pic attached).

However, I'm not a coder, that's why I'm working with a template. So I don't really know what to do with this kind of information and that's why I'm here to look for help.

Does it have anything to do with the j_mediaelement template? Width and height both 100%? If I changed that to my video size, would that solve the problem? But then all videos would be that size, right?


<?php

// Add the mediaelement style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/mediaelement/'. MEDIAELEMENT .'/css/mediaelementplayer.min.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/mediaelement/<?php echo MEDIAELEMENT; ?>/js/mediaelement-and-player.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$('video,audio').mediaelementplayer({
// Put custom options here
/* set width and height to 100% to trigger the responsive mode of mediaelement.js */
videoWidth: '100%',
videoHeight: '100%',
pluginPath:'<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo MEDIAELEMENT; ?>/',
flashName:'legacy/flashmediaelement.swf',
silverlightName:'legacy/silverlightmediaelement.xap'
});
});
})(jQuery);
</script>

[Lupus]

"/* set width and height to 100% to trigger the responsive mode of mediaelement.js */
videoWidth: '100%',
videoHeight: '100%',"

Here is the information :-)

If you want to set a specific width, you have to change this settings. But the mediaplayer won't be responsive anymore. (You can use MediaQueries to keep it responsive)

[Swissmiss]

Thank you for your time and effort. I used animated gifs. Why I hadn't thought of this earlier, I have no idea. But I learned a few new things about contao thanks to you.

[Lupus]

You're welcome :-)

Don't hesitate if you have to ask any questions on Contao.