Question

我正在尝试在Drupal网站主页中实施http://jsfiddle.net/mgmilcher/8R7Xx/sho/响应式HTML5视频背景，但未成功。通过本地复制所有html代码到我的页面 - front.tpl.php页面，视频和文本出现，但显然不是我想要的。一旦我将CSS添加到我的style.css表中，一切都会消失。我已将JS本地添加到网站，目前已将其添加到＆＃34; theme.info＆＃34;文件包含脚本[] =＆＃39; name.js＆＃39;。不幸的是，这似乎对结果没有任何影响。我的主题基于bootstrap，这个示例与创建的相同。

有没有人成功将此示例应用到他们的Drupal站点？我想要一个响应式背景视频，仅用于我可以添加其他内容的主要内容 - 文本，视频，并且需要能够具有滚动功能才能查看视口下方的内容。

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="title-container">
            <div class="headline">
                    <h1>Welcome to our Company</h1>

            </div>
            <div class="description">
                <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
            </div>
        </div>
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
        <div class="poster hidden">
            <img src="http://www.videojs.com/img/poster.jpg" alt="">
        </div>
    </div>
</div>

CSS

.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.video-container .filter {
  z-index: 100;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}
.video-container .title-container {
  z-index: 1000;
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.video-container .description .inner {
  font-size: 1em;
  width: 45%;
  margin: 0 auto;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}
.video-container video.fillWidth {
  width: 100%;
}

JS

/** Document Ready Functions **/
/********************************************************************/

$( document ).ready(function() {

    // Resive video
    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');

    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

/** Reusable Functions **/
/********************************************************************/

function scaleVideoContainer() {

    var height = $(window).height();
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        videoWidth,
        videoHeight;

    console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width'),
            windowAspectRatio = windowHeight/windowWidth;

        if (videoAspectRatio > windowAspectRatio) {
            videoWidth = windowWidth;
            videoHeight = videoWidth * videoAspectRatio;
            $(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
        } else {
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
        }

        $(this).width(videoWidth).height(videoHeight);

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');


    });
}

我已安装了现代化模块，并在我的sites / all / libraries / modernizr文件夹中包含了modernizr.min.js

Answer 1

我不确定，但您确保在sites/all/themes/THEME_NAME/js

内存储额外的js文件

因为Drupal不运行自定义js，除非它存储在那里需要的每个主题。

Answer 2

至少，你必须使用jquery命名空间包装javascript，如下所示：

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $('input.myCustomBehavior', context).once('myCustomBehavior', function () {
       // Apply the myCustomBehaviour effect to the elements only once.
      });
     }
  };
})(jQuery);

Drupal.behaviors.myModuleBehavior＆＃39;由于ajax的考虑，还有其他额外的代码。

有关详细信息，请参阅文档The Drupal JavaScript API。

DIV Modernizr中的Drupal响应式HTML5视频背景

2 个答案: