Question

我有一个制作“视频面板”的项目，该项目的目标是制作一个屏幕，在该屏幕上我可以放置实时流，并在同一页面上一起查看所有流。问题在于这些视频无法正确显示在屏幕上，而是很小。

我尝试将视频的宽度/高度设置为错误，这会引起错误，这不是我想要的结果。使用flexbox我以为我可以没有错误，但是我错了，错误仍然存在。我在CSS中使用了属性width/height: 100%，但没有用，结果是一样的。

<body>
    <form id="add-video">
        <input type="text" id="video-title-input" placeholder="Título do Vídeo">
        <input type="text" id="video-link" placeholder="Link do Vídeo">
        <input type="button" value="Adicionar vídeo" id="btn-add" onclick="">
    </form>

    <div id="videos">

    </div>

    <script src="main.js"></script>
</body>

div是我放置视频的位置，js文件是放置视频的位置，这里是放置视频以及与定位有关的其他东西的位置：

function addVideotoPanel(title = 'VAZIO', link) {
    //div
    const divVideo = document.createElement('div');
    divVideo.setAttribute('id', `${getVideoID(link)}-container`)
    divVideo.setAttribute('class', 'video-container');
    divVideo.setAttribute('onmouseover', 'mouseOverDiv(this)');
    divVideo.setAttribute('onmouseout', 'mouseOutDiv(this)');

    //title
    const videoTitle = document.createElement('h2');
    videoTitle.setAttribute('class', 'video-title');
    videoTitle.innerHTML = title;

    //Close Button
    const closeBtn = document.createElement('input');
    closeBtn.setAttribute('type', 'button');
    closeBtn.setAttribute('value', 'X');
    closeBtn.style.display = 'none';
    closeBtn.setAttribute('id', `${getVideoID(link)}-close-btn`);
    closeBtn.addEventListener('click', (e) => {
        divVideo.remove();
    })

    //iframe
    const iframe = document.createElement('iframe');
    iframe.setAttribute('src', getEmbedLink(link));
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    iframe.setAttribute('allowfullscreen', '');

    //Add to DOM
    divVideo.appendChild(videoTitle);
    divVideo.appendChild(closeBtn);
    divVideo.appendChild(iframe);
    document.querySelector('#videos').appendChild(divVideo);
}

function mouseOverDiv(div) {
    div.getElementsByTagName('input')[0].style.display = 'block';
}

function mouseOutDiv(div) {
    div.getElementsByTagName('input')[0].style.display = 'none';
}

这是添加到HTML的CSS：

body {
    background: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    padding: 0;
    margin: 0;

}

#add-video {
    text-align: center;
}

#videos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
}

.video-container {
    display: flex;
    flex-direction: column;
}

.video-title {
    font-size: 70%;
    text-align: center;
}

.video-title:hover {
    font-weight: bold;
}

通过此代码获得的结果是：https://imgur.com/RTQH4v6

这是我想要的结果：https://imgur.com/PVg4F9l

没有错误消息发给我，因为没有任何原因。

如何使用Flexbox自动垂直和水平填充div的所有空间

0 个答案: