图片/视频覆盖了纵向宽高比的整个屏幕
问题描述:
我在我的网站上制作了一个覆盖整个屏幕的视频标题。当纵横比发生变化(例如肖像)时,视频或图像(对于不支持背景中的视频的设备)不会占满整个屏幕。图片/视频覆盖了纵向宽高比的整个屏幕
这是现在的样子:
这是我希望它看起来:
答
<div id="stosto" class="header-video" style="overflow:hidden;">
<img src="/templates/passage/vidhead/img/elodyposter.jpg"
class="header-video__media"
data-teaser="/templates/passage/vidhead/video/headerv"
data-video-width="1172"
data-video-height="552">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/templates/passage/vidhead/js/modernizr.js"></script>
<script src="/templates/passage/vidhead/js/script.js?v1.1"></script>
<script>
$(document).ready(function() {
$('.header-video').each(function(i, elem) {
headerVideo = new HeaderVideo({
element: elem,
media: '.header-video__media',
playTrigger: '.header-video__play-trigger',
closeTrigger: '.header-video__close-trigger'
});
});
});
</script>
</div>
共享源代码或没有人能够帮助你,我们不是奇才:) – ddb