Commit ca6ce659 authored by huangjie's avatar huangjie

视频

parent 075028ec
......@@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body style="margin: 0">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
<template>
<div class="main">
<div class="video">
<video autoplay loop>
<video autoplay loop muted class="homeVideo" :style="{width:widths,height:heights}">
<source src="@/assets/background.mp4" type="video/mp4">
</video>
</div>
......@@ -11,14 +11,36 @@
<script>
export default {
data() {
return {}
return {
widths: '',
heights:'',
}
},
computed: {},
mounted() {},
mounted() {
this.widths = document.documentElement.clientWidth+'px'
this.heights = document.documentElement.clientHeight+'px'
console.log(this.widths)
},
methods: {}
}
</script>
<style scoped>
.home-video {
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
object-fit: fill;/*这里是关键*/
width: auto;
height: auto;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/*background: url(../video/cover.jpg) no-repeat;*/
background-size: cover;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment