Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 视频背景大小问题_Jquery_Html_Css_Video - Fatal编程技术网

Jquery 视频背景大小问题

Jquery 视频背景大小问题,jquery,html,css,video,Jquery,Html,Css,Video,我有一个视频播放在我的网站背景,但我不能得到正确的大小。如果我让它适合整个页面的高度,它会拉伸宽度,并在右侧添加一个水平滚动条,使其没有多余的内容。但是,如果我正确调整宽度,视频将在页面的一半处结束 <div class="object fullbleed" style="width: auto; height: auto; position: absolute; left: 0px; top: 0px; border-style: none; border-color: rgba(0,

我有一个视频播放在我的网站背景,但我不能得到正确的大小。如果我让它适合整个页面的高度,它会拉伸宽度,并在右侧添加一个水平滚动条,使其没有多余的内容。但是,如果我正确调整宽度,视频将在页面的一半处结束

<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>

$(文档).ready(函数()
{
var元素=$(“#粉红色墨水排列”);
视频链接https://siteassets.pagecloud.com/remarkableresults/downloads/Red_wine_falling_1080p_(仅视频)-ID-c0fd8d89-0612-4fb1-ddb1-c8887092b627-ID-d71bad33-71ac-4084-e4d1-a0303eb71c8a.mp4';
var videoElement='';
元素。追加(videoElement);
var pinkInk=$(“#粉红墨水”).css({
'位置':'绝对',
“右”:0,
“宽度”:“自动”,
“高度”:“自动”,
“背景色”:“fff”,
“显示”:“无”
});
pinkInk.show().get(0.play();
元素。单击(函数(e)
{
});
元素鼠标指针(函数(e)
{
});
mouseleave元素(函数(e)
{
});
元素上('scrollin',函数(e)
{
});
元素.on('scrollout',函数(e)
{
});
});


我不确定我是否可以用代码修复它,或者我是否必须以某种方式重新调整视频尺寸以使其正常工作。

您是否尝试设置css宽度和高度属性

body,html{
宽度:100%;
身高:100%;
}
录像带{
宽度:100%;
身高:100%;
}