CSS背景影片如何自適應放大縮小 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

CSS背景影片如何自適應放大縮小

css3

ppp896 2020-07-12 20:24:25 ‧ 2391 瀏覽

CSS背景影片如何自適應放大縮小,手機版時影片無法同步縮小?

    <video autoplay muted loop id="myVideo">
      <source src="video/loop.mp4" type="video/mp4">
      Your browser does not support HTML5 video. </video>

CSS

{
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 17px;
}
header{
width: 100%;
height: 100vh;
position: relative;
}
#myVideo {
min-width: 100%;
min-height: 100%;
}

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

2 個回答

1

easthingqq

iT邦新手 5 級 ‧ 2020-07-13 09:57:53

最佳解答

video {
object-fit: cover;
width: 100vw;
height: 100vh;
}

回應 1
分享
檢舉

ppp896 iT邦新手 4 級 ‧ 2020-07-13 10:21:24 檢舉

感謝,已解決.謝謝大家回答!

登入發表回應

0

listennn08

iT邦高手 5 級 ‧ 2020-07-13 09:42:12

#myVideo {
    width: 100%;
}

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙