Wordpress CSS style sheet not affecting widget output - php

Question

so I am still quite new to wordpress development so don't rage and I am sorry if I did something really stupid.
So I am having trouble with my CSS, for some reason it's not affecting the widget content output, which can be seen in the movieposterdisplay-class file. What I am trying to do is make the outputted youtube video auto size to fit the container using CSS. What I want to know is why the CSS isn't affecting the HTML code and a solution to fix it.
So far I tried using !important in case the wordpress theme was overriding the CSS but the problem must be related to something else. Thanks in advance for any help.
movieposterdisplayfile
require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay-
scripts.php');
require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay-
class.php');
function register_movieposterdisplay(){
register_widget('Movie_Poster_Display_Widget');
}
add_action('widgets_init', 'register_movieposterdisplay');
movieposterdisplay-scripts file
<?php
function mpd_add_scripts(){
wp_enqueue_style('mpd-main-style', plugins_url().'/movieposterdisplay/css/style.css');
wp_enqueue_script('mpd-main-style', plugins_url().'/movieposterdisplay/js/main.js');
}
add_action('wp_enqueue_scripts', 'mpd_add_scripts');
movieposterdisplay-class file (file contains the widget output)
<?php
class Movie_Poster_Display_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'movieposterdisplay_widget', // Base ID
esc_html__( 'Movie Widget', 'mpd_domain' ), // Name
array( 'description' => esc_html__( 'Displays Movie/TV posters, overviews and trailers.', 'mpd_domain' ), )
);
}
public function widget( $args, $instance) {
echo $args['before_widget'];
$trailer_key ="http://www.youtube.com/embed/" .$this->display_trailer($instance, $first_movie_result)."?enablejsapi=1";
?>
<div class="youtubeplayer">
<iframe
id="player" type="text/html"
src="<?php echo $trailer_key;?>"
frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>
<?php
echo $args['after_widget'];
}
style.css
.youtubeplayer {
position: relative !important;
padding-bottom: 75% !important;
padding-top: 25px !important;
height: 0 !important;
border: 5px solid red !important;
}
.youtubeplayer iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

Answer 1

The problem was due to an incorrect file path in the movieposterdisplay-scripts file. Whilst the file loaded correctly in the main php file
require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- class.php');
as it already assigned the correct plugin folder name. It did not enqueue correctly as the code was wp_enqueue_style('mpd-main-style', plugins_url().'/movieposterdisplay/css/style.css'); and I had previously changed the folder name.
Hence I thought it was loading correctly and running fine, however it was only loading correctly.