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



我在播放"容器流体"的滑块中播放视频时遇到了麻烦。幻灯片和视频很好地覆盖了浏览器视图的整个宽度,但是当我缩小浏览器本身,或者在较低的分辨率下测试网站时,我可以看出视频只从右侧裁剪,因此视频中吸引人的中心点从中心移动到右侧。以下是一些截图,说明了我的意思。

全屏

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

<

一半屏幕/strong>http://puu.sh/jrnot/c56f0d06c3.jpg

根据视图的宽度使其居中?任何帮助都是感激的!

//编辑

抱歉,我应该事先显示一些代码。下面是幻灯片中的一个示例。其余部分与不同视频url相同。

<!-- 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();
            });
查理

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

请把你的代码贴出来,这样我们可以看一看,并给出更好的建议。

最新更新