Hướng dẫn html video not full screen - video html không toàn màn hình

Tôi đang xây dựng một trang web với HTML + CSS. Và tôi đang cố gắng sử dụng một video làm nền của trang web của tôi. Vấn đề là có một số loại borther ở bên trái và bên phải của video của tôi.

Tôi đã thử sử dụng chiều rộng 100% và chiều cao 100%, chiều rộng và chiều cao 100Vh và 100VW, và tối thiểu và tối thiểu 100% nhưng vẫn còn một số không gian còn lại ở cả bên trái và bên phải của video

.container {
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
  color: white;
  font-size: 2em;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0;
}


/*Adjust container for Fullscreen Video Background*/

.blue {
  grid-column: 1/-1;
  height: 100vh;
}

.video {
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
}

.video-overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 0;
  opacity: 0.75;
}

  
  
  



  

    

      
      

      
      

        
Welcome to ARCANA
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
    
    
red
    
green
    
yellow
    
black
  

Tôi mong đợi video sẽ là toàn màn hình.

Kameron

8.9513 huy hiệu vàng8 Huy hiệu bạc22 Huy hiệu đồng3 gold badges8 silver badges22 bronze badges

Đã hỏi ngày 30 tháng 3 năm 2019 lúc 11:22Mar 30, 2019 at 11:22

4

body{
padding:0px;
margin:0px;
}


video{
position:fixed;
width:100%;
height:100vh;
}

Bạn có thể đặt video của bạn như bạn muốn

Đã trả lời ngày 30 tháng 3 năm 2019 lúc 11:33Mar 30, 2019 at 11:33

2

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

  
Heading
  
Lorem ipsum...
  
  Pause

Tôi hy vọng điều này sẽ khắc phục vấn đề của bạn.

Superdj

7.2639 Huy hiệu vàng40 Huy hiệu bạc69 Huy hiệu đồng9 gold badges40 silver badges69 bronze badges

Đã trả lời ngày 30 tháng 3 năm 2019 lúc 11:51Mar 30, 2019 at 11:51

3

**Xin chào. Bạn đã kiểm tra video để xem nó có độ phân giải cao không? Ý tôi là, có phải là từ 720p, định nghĩa 1080p không? Hãy thử kiểm tra xem video có chất lượng đó không. Bất cứ điều gì thấp hơn đó có thể là một kết quả màn hình một phần tư. Và nếu đó không phải là những định nghĩa cao đó, thì không có mã nào để sửa nó trừ khi bằng nỗ lực đặc biệt. Văn bảnstrong text

Đã trả lời ngày 17 tháng 3 lúc 20:16Mar 17 at 20:16

1

Thật không may, điều này được thực hiện dễ dàng với hình ảnh bạn có thể chỉ cần đặt nó làm nền. Dưới đây là một ví dụ bootstrap hoạt động tuyệt vời cho video. Tôi đã đi trước và áp dụng nó vào mã của bạn và thêm các kiểu cần thiết. Có vẻ như đang làm việc tốt với tôi!

#video-background {
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.video-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 1;
  opacity: 0.75;
}

section.main {
  position: relative;
  top: 100vh;
}

  



  

    

      
  
  

        
      

        
Welcome to ARCANA
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
    
red
    
green
    
yellow
    
black
  

Đã trả lời ngày 17 tháng 3 lúc 21:52Mar 17 at 21:52

KameronkameronKameron

8.9513 huy hiệu vàng8 Huy hiệu bạc22 Huy hiệu đồng3 gold badges8 silver badges22 bronze badges

Làm thế nào để bạn mở rộng lên toàn màn hình trong HTML?

Làm cách nào để sửa video toàn màn hình trong HTML?

Làm thế nào để bạn tạo một video toàn màn hình?