Question

我无法将视频集中在一个光滑的滑块中，该滑块正在作为容器流体播放。幻灯片和视频完全覆盖浏览器视图的整个宽度，但是当我缩小浏览器本身，或者以较低分辨率测试网站时，我可以告诉视频仅从右侧裁剪，因此中心点视频中的吸引力从中心偏移，更偏向右侧。下面是一些截图，表明了我的意思。

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

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

无论如何根据视图的宽度使其居中？任何帮助表示赞赏！

//修改

抱歉，我应该事先展示一些代码。以下是幻灯片中仅一张幻灯片的示例。其余部分与不同的视频网址相同。

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

如果你想保留所有元素＆＃39;所有屏幕的大小，在写宽度和高度时应使用％。此外，如果您不喜欢调整大小并需要为特定屏幕调整特殊大小，您还可以在.css文件中使用媒体查询。

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

定心＆＃39;容器 - 流体＆＃39;幻灯片＆amp;录像机

1 个答案: