设置为全宽和全高时，视频幻灯片会放大

Question

我在wordpress http://archive.nicinabox.com/superslides/中使用超幻灯片jquery滑块。我已经对其进行了自定义，并使其也可以用于视频。现在的问题是，根据屏幕尺寸设置视频的高度和宽度时，视频会放大。

这是我的代码：

  <div id="photos-slider" class="slider-section">
        <div class="slides-container">
             <?php if (have_posts()): while (have_posts()): the_post(); ?>
             <?php $carousel = get_field('product_slider'); 

            ?>
            <!-- slide item 1 -->
            <?php foreach($carousel as $slide): ?>
            <div class="slide-item">
                <!--<img src="<?php //$feat_prod_img_main = wp_get_attachment_image_src($slide['id'], 'full'); echo $feat_prod_img_main[0]; ?>" alt="<?php //the_title(); ?>" title="<?php //the_title(); ?>"/>-->
                <?php 
                //$feat_prod_img_main = wp_get_attachment_image_src($slide['id'], 'full');

                if($slide['mime_type'] == 'image/jpeg' || $slide['mime_type'] == 'image/png' || $slide['mime_type'] == 'image/gif')
                {
                    ?>
                    <img src="<?php  echo $slide['url']; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"/>    
                    <?php
                }

                if($slide['mime_type'] == 'video/mpeg' || $slide['mime_type'] == 'video/mp4' || $slide['mime_type'] == 'video/quicktime')
                {
                    ?>
                    <video autoplay  playsinline="" preload="auto" muted="" class="video_background_product">
                        <source src="<?php  echo $slide['url']; ?>" type="video/mp4">
                    </video>
                    <div class="dots-overlay"></div>
                    <?php
                }                   
                ?>
                 <div class="slider-content">
                    <div class="col-md-12 left col-sm-12 col-xs-12 ">
                        <h3 class="slide-sub-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.7s">
                        <span <?php $bg = get_field('heading_bg'); if($bg=='bg') { echo 'class="title"'; } else { } ?>  style="<?php 
                        $bg = get_field('heading_bg'); 
                        if($bg=='bg') 
                        { 
                            $opacity=get_field('transprent');
                            $opacity_per=$opacity/100;
                            $bg_color=get_field('heading_bg_color'); 
                            $text_color=get_field('text_color');
                            $font_size=get_field('heading_font_size'); 
                            $heading_case=get_field('heading_case');
                            if($heading_case=='up')
                            {
                                echo 'background:'.$bg_color.';color:'.$text_color.';padding:13px;font-size:'.$font_size.';text-transform: uppercase; opacity:'.$opacity_per.';';
                            }
                            else
                            {
                                echo 'background:'.$bg_color.';color:'.$text_color.';padding:13px;font-size:'.$font_size.';text-transform: capitalize; opacity:'.$opacity_per.';';
                            }

                        } 
                        else
                        { 
                            $opacity=get_field('transprent');
                            $opacity_per=$opacity/100;
                            $heading_case=get_field('heading_case'); 
                            $text_color=get_field('text_color');
                            $font_size=get_field('heading_font_size');
                            if($heading_case=='up')
                            {
                                echo 'background:transparent;padding:0px;color:'.$text_color.';font-size:'.$font_size.';text-transform: uppercase;opacity:'.$opacity_per.';'; 
                            }
                            else
                            {
                                echo 'background:transparent;padding:0px;color:'.$text_color.';font-size:'.$font_size.';text-transform:capitalize;opacity:'.$opacity_per.';';
                            }
                        } ?>">
                        <?php 

                            echo get_field('product_slider_heading');
                        ?></span>

                        </h3>
                    </div>
                </div>      
            </div><!-- slide item 1 over -->
        <?php endforeach; ?>
                <?php
                    endwhile; endif; wp_reset_query();
                ?>


        </div>
        <nav class="slides-navigation">
            <a href="#" class="next"><i class="fa fa-angle-right "></i></a>
            <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
        </nav>
        <p class="goto-next"><a class="arrow animated bounce" href="#featured-section"><i class="fa fa-angle-down"></i></a></p>
    </div>
  <style>.video_background_product {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

这是我用来使其缩放较少的CSS代码。但是视频还是放大了。

任何人都可以建议我解决此问题。

谢谢。