Fatal编程技术网
  • javascript/
  • 由于javascript或css错误，Webm视频未以正确的宽度显示

由于javascript或css错误，Webm视频未以正确的宽度显示

javascript html css video

由于javascript或css错误，Webm视频未以正确的宽度显示,javascript,html,css,video,Javascript,Html,Css,Video,我有一堆Webm视频，在显示时我希望它们覆盖整个屏幕。高度是正确的，但宽度太短，无论我更改了什么边距或宽度值，我开始相信这不是CSS问题。（视频为1920 x 1080像素）。这个解决方案可能很简单，但我对编程比较陌生。任何帮助都将不胜感激 HTML: JS: 这对我来说很好，除非你说的是放大视频，这样两边都看不到空白。它填充了更小的高度或宽度：是的，但我希望1920 x 1080px的视频覆盖整个屏幕，而不是在侧面留下空白。这很奇怪，因为视频并没有按原来的16:9比例去显示，但也没有失真。你知

我有一堆Webm视频，在显示时我希望它们覆盖整个屏幕。高度是正确的，但宽度太短，无论我更改了什么边距或宽度值，我开始相信这不是CSS问题。（视频为1920 x 1080像素）。这个解决方案可能很简单，但我对编程比较陌生。任何帮助都将不胜感激

HTML:

JS:

这对我来说很好，除非你说的是放大视频，这样两边都看不到空白。它填充了更小的高度或宽度：是的，但我希望1920 x 1080px的视频覆盖整个屏幕，而不是在侧面留下空白。这很奇怪，因为视频并没有按原来的16:9比例去显示，但也没有失真。你知道我应该如何编码，这样在保持视频原始比例的同时，侧面没有边距吗？我不介意它是否剪了一点。非常感谢。您已经告诉它，宽度和高度都不能超过100%，因此无法填充屏幕（除非视频的纵横比与视口的纵横比完全相同）。否则，为了填充屏幕，必须裁剪部分视频（顶部/底部或侧面）。这就是你需要的吗？是的，谢谢！你的评论帮助我解决了这个问题。 
  <style>
        
        body {
    background-image: url('videos/fondo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
}

</style>
    
</head>

<body>
    <div id="letters">

<!--b1-->


        <video id="b1" preload="auto" autoplay="true">
            <source src="videos/b1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--p1-->


        <video id="p1" preload="auto" autoplay="true">
            <source src="videos/p1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--k1-->


        <video id="k1" preload="auto" autoplay="true">
            <source src="videos/k1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--g1-->


        <video id="g1" preload="auto" autoplay="true">
            <source src="videos/g1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--z1-->


        <video id="z1" preload="auto" autoplay="true">
            <source src="videos/z1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--x1-->


        <video id="x1" preload="auto" autoplay="true">
            <source src="videos/x1.webm" type="video/webm">
            Video not supported
            
        </video>
    
     <!--d1-->
    
     <video id="d1" preload="auto" autoplay="true">
            <source src="videos/d1.webm" type="video/webm">
            Video not supported
            
        </video>
    
     <!--f1-->
    
     <video id="f1" preload="auto" autoplay="true">
            <source src="videos/f1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--m1-->
    
     <video id="m1" preload="auto" autoplay="true">
            <source src="videos/m1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--q1-->
    
     <video id="q1" preload="auto" autoplay="true">
            <source src="videos/q1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--v1-->
    
     <video id="v1" preload="auto" autoplay="true">
            <source src="videos/v1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--s1-->
    
     <video id="s1" preload="auto" autoplay="true">
            <source src="videos/s1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--t1-->
    
     <video id="t1" preload="auto" autoplay="true">
            <source src="videos/t1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--j1-->
    
     <video id="j1" preload="auto" autoplay="true">
            <source src="videos/j1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--e1-->
    
     <video id="e1" preload="auto" autoplay="true">
            <source src="videos/e1.webm" type="video/webm">
            Video not supported
            
        </video>

    
    <!--i1-->
    
     <video id="i1" preload="auto" autoplay="true">
            <source src="videos/i1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--y1-->
    
     <video id="y1" preload="auto" autoplay="true">
            <source src="videos/y1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--a1-->
    
     <video id="a1" preload="auto" autoplay="true">
            <source src="videos/a1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--u1-->
    
     <video id="u1" preload="auto" autoplay="true">
            <source src="videos/u1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--w1-->
    
     <video id="w1" preload="auto" autoplay="true">
            <source src="videos/W1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--h1-->
    
     <video id="h1" preload="auto" autoplay="true">
            <source src="videos/h1.webm" type="video/webm">
            Video not supported
            
        </video>
    
    <!--r1-->
    
     <video id="r1" preload="auto" autoplay="true">
            <source src="videos/r1.webm" type="video/webm">
            Video not supported
            
        </video>
    

        </div>
    
<script src="animations.js"></script>
</body>
</html>

  #letters{
  position: fixed; 
  min-width: 100%;  
  min-height: 100%; 
  width: 100%;
  right: 0; 
  bottom: 0; 
                 
            }
    
#letters video {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  margin-left: 0%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

var videos = {
    'b': document.getElementById('b1'),
    'p': document.getElementById('p1'),
    'k': document.getElementById('k1'),
    'g': document.getElementById('g1'),
    'z': document.getElementById('z1'),
    'x': document.getElementById('x1'),
    'd': document.getElementById('d1'),
    'f': document.getElementById('f1'),
    'm': document.getElementById('m1'),
    'q': document.getElementById('q1'),
    'v': document.getElementById('v1'),
    's': document.getElementById('s1'),
    't': document.getElementById('t1'),
    'j': document.getElementById('j1'),
    'e': document.getElementById('e1'),
    'i': document.getElementById('i1'),
    'y': document.getElementById('y1'),
    'a': document.getElementById('a1'),
    'u': document.getElementById('u1'),
    'w': document.getElementById('w1'),
    'h': document.getElementById('h1'),
    'r': document.getElementById('r1'),
}

document.addEventListener('keypress', e => {
    let video = videos[e.key];
    if (video) {
        video.play();
        video.currentTime = 0;
        $(video).hide();
        
    }   
});