Question

嘿，你们所有的巫师，在过去的几天里，我一直在拔头发，试图弄清楚这一点。

我正在尝试包含全屏视频背景，但似乎我遇到了障碍。

下面是我想要完成的图片。

我尝试使用视频元素和iframe。

，当浏览器窗口调整大小时，我无法将下面的div总是嵌套在下面。

非常感谢任何帮助或指示。我最近得到的是最小宽度/高度，但它仍然留有空隙......

我最终得到的是第二个img的内容。视频会随浏览器调整大小，而且还有一个差距

Answer 1

要防止出现此问题，您需要执行此操作：

的CSS：

public static void main(String[] args) {

    Scanner scnr = new Scanner(System.in); // Input stream for standard input
    Scanner inSS = null;                   // Input string stream
    String lineString = "";                // Holds line of text
    String firstWord = "";                 // First name
    String secondWord = "";                  // Last name
    boolean inputDone = false;             // Flag to indicate next iteration

    // Prompt user for input
    System.out.println("Enter string seperated by a comma: ");

    // Grab data as long as "Exit" is not entered
    while (!inputDone) {

        // Entire line into lineString
        lineString = scnr.nextLine();

        // Create new input string stream
        inSS = new Scanner(lineString);

        // Now process the line
        firstWord = inSS.next();

        // Output parsed values
        if (firstWord.equals("q")) {
            System.out.println("Exiting.");

            inputDone = true;

        if else (lineString != ",") {     // This is where I am stuck!
            System.out.print("No comma in string");
        }
        } else {
            secondWord = inSS.next();


            System.out.println("First word: " + firstWord);
            System.out.println("Second word: " + secondWord);

            System.out.println();
        }
    }

    return;
}

并将您的视频放入div1：

.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}

不允许视频元素在溢出时显示。 div1总是高度：100％，div2总是高度：100％。

如果您想将视频放入div1添加

<div class="div1">
     <video autoplay>...</video>
</div>
<div class="div2">
</div>

到视频标记。

IE不支持对象

Answer 2

我不确定这是否有效但是你有没有试过去除宽度：100％并且只保持高度：100％？

如果你能展示代码，我可能会给出更好的建议：p

编辑：既然你想要高度是屏幕的高度和宽度可以或多或少，我会说，试试

    min-height: 100%;
    width: auto;
    height: auto;

这应该可以解决问题

新编辑：

body{
  overflow:hidden;
}
#wrapper {
  width: 100%;
  height: 100%;
}

.videoInsert {
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    position: absolute;
    left: 0%;
    top: 0%;
}
video{
      display: inline-block;
    vertical-align: baseline;
      object-fit: fill;
}

CSS定位/调整html5视频背景

2 个答案: