我在网站背景中播放了一个视频,但无法正确确定尺寸。如果我使它适合整个页面的高度,它将拉伸宽度并添加水平滚动条,以使右侧没有多余的内容。但是,如果我正确设置宽度,则视频将在页面的一半处结束。
<div class="object fullbleed" style="width: auto; height: auto; position: absolute; left: 0px; top: 0px; border-style: none; border-color: rgba(0, 0, 0, 0); transform: translateX(-50%); min-width: 100%; box-sizing: border-box; background-color: rgba(0, 0, 0, 0);" id="pink-ink-spread" data-alt-style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; border-style: none; border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);" data-alt-hidden="true">
<script type="disabled" data-runtime-script="true">$(document).ready(function()
{
var element = $('#pink-ink-spread');
var videoLink = 'https://siteassets.pagecloud.com/remarkableresults/downloads/Red_wine_falling_1080p_(Video_Only)-ID-c0fd8d89-0612-4fb1-ddb1-c8887092b627-ID-d71bad33-71ac-4084-e4d1-a0303eb71c8a.mp4';
var videoElement = '<video id="pink-ink" poster="https://personalpageassets.pagecloud.com/nick-belland1/images/transparent-ID-3ceacd26-d065-45ee-b413-694a7ba42234.png?nocache=7fb20c9a-a6b9-4fa4-afac-155eb904dc0c"><source src="'+videoLink+'" type="video/mp4"></video>';
element.append(videoElement);
var pinkInk = $('#pink-ink').css({
'position':'absolute',
'right':0,
'width':'auto',
'height':'auto',
'background-color':'#fff',
'display':'none'
});
pinkInk.show().get(0).play();
element.click(function(e)
{
});
element.mouseenter(function(e)
{
});
element.mouseleave(function(e)
{
});
element.on('scrollin', function(e)
{
});
element.on('scrollout', function(e)
{
});
});</script>
<video id="pink-ink" poster="https://personalpageassets.pagecloud.com/nick-belland1/images/transparent-ID-3ceacd26-d065-45ee-b413-694a7ba42234.png?nocache=7fb20c9a-a6b9-4fa4-afac-155eb904dc0c" style="position: absolute; right: 0px; width: auto; background-color: rgb(0, 0, 0);"><source src="https://siteassets.pagecloud.com/remarkableresults/downloads/Red_wine_falling_1080p_(Video_Only)-ID-c0fd8d89-0612-4fb1-ddb1-c8887092b627-ID-d71bad33-71ac-4084-e4d1-a0303eb71c8a.mp4" type="video/mp4"></video>
我不确定是否可以使用代码进行修复,或者是否必须重新调整视频尺寸才能使其正常工作。
最佳答案
您是否尝试设置CSS的width和height属性。
body,html {
width:100%;
height:100%;
}
video {
width:100%;
height:100%;
}
https://jsfiddle.net/0t3jefz1/
关于jquery - 视频背景调整问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34166430/