所以我对wordpress的开发还很陌生，所以如果我做了一些非常愚蠢的事情，请不要生气，我很抱歉。

所以我的CSS有问题，因为某种原因，它不会影响小部件的内容输出，可以在movieposterdisplay类文件中看到。我想做的是使用CSS使输出的youtube视频自动调整大小以适合容器。我想知道的是为什么CSS不会影响HTML代码，以及修复它的解决方案。提前感谢您的帮助。

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脚本文件

<?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类文件（文件包含小部件输出）

<?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\'];
} 

样式。css

.youtubeplayer {
  position: relative;
  padding-bottom: 75%; 
  padding-top: 25px;
  height: 0;
  border: 5px solid red;
}

.youtubeplayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}