javascript - 居中 'container-fluid' 幻灯片和视频播放器

Question

我无法将视频置于作为“容器流体”播放的光滑 slider 的中心。幻灯片和视频很好地覆盖了浏览器 View 的整个宽度，但是当我缩小浏览器本身或以较低分辨率测试网站时，我可以看出视频仅从右侧裁剪，因此是中心点视频中的吸引力从中心转移到右边。下面是一些屏幕截图，表明了我的意思。

全屏 http://puu.sh/jrnmO/34b7b9eb4b.jpg

半屏 http://puu.sh/jrnot/c56f0d06c3.jpg

无论如何让它根据 View 的宽度居中？感谢您的帮助!

//编辑

抱歉，我应该事先展示一些代码。下面是幻灯片中只有一张幻灯片的示例。其余与不同的视频 URL 相同。

HTML

<!-- slide -->
      <div class="container-fluid slide">
        <video id="video1" muted loop>
          <source src="videos/Video1.mp4" type="video/mp4">
        </video>

      <!-- overlay -->
      <div class="container">
        <div class="col-md-5 title">

          <!-- title -->
          <div class= "slide-alt">
            <h3>Freelance and corporate production</h3>
            <h2>Inspire to create</h2>
            <a href="/pro/ezone/rfi/" class="btn btn-success">Get in touch</a>
          </div>
        </div>
        <div class="clearfix"></div>

        <!-- controls -->
        <div class="col-md-3 now-playing">
          <div class="now-playing-title">
            Now playing <i class="fa fa-play-circle"></i>
          </div>
          <div class="inner">
            <a href="/pro/article/broadcast-film-making-on-the-move-webinar" class="block-link">
              <h3>Documentary Shooting Tips-</h3>
              <p>Joss Stone World Tour</p>
            </a>
          </div>
        </div>

        <div class="col-md-6 text">
          <p>From weddings to corporate videos, Sony provides the range of professional camcorders and video production equipment that meets the requirements of every videography business. Discover creative inspiration and filming tips with our case studies, see tutorials from independent experts and find videographer events.</p>
        </div>

        <div class="col-md-3 in-action">
          <div class="inner">
            <h3>Your gear in action</h3>
            <a href="#" class="block-link trigger-secondary-slider">
              <img src="images/sliders/in-action-1.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>

jQuery

init: function() {
            var config = this.config;

            var slider = jQuery( config.target );

            slider.slick({
                infinite: false,
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
                arrows: false,
                fade: true,
                cssEase: 'linear',
                autoplay: true,
                autoplaySpeed: 7990
            });

            var videos = jQuery( config.target + ' video' );

            videos.each(function( index ) {
                videos.get( index ).play();
            });

查理

Answer 1

如果你想在所有屏幕上保持所有元素的大小，你应该在写宽度和高度时使用 % 。此外，如果您不喜欢调整大小并且需要针对特定​​屏幕进行一些特殊调整，您还可以在 .css 文件中使用媒体查询。

请发布您的代码，以便我们查看并提供更好的建议。