Как сделать видео и титры на одной строке в html

Я хотел бы, чтобы на моем веб-сайте было три видео одинакового размера рядом с отступом около 40 пикселей между каждым видео. Я также хотел бы, чтобы внизу было место для подписи, чтобы иметь краткое описание видео. Я надеюсь, что это будет выглядеть примерно так:

Как сделать видео и титры на одной строке в html

Я также хотел бы, чтобы видео расширялись, чтобы был столбец из трех видео и подписей, если экран не может уместить все три видео в одну строку. Я также хотел бы убедиться, что видео не имеют черных линий сбоку при воспроизведении из-за проблем с изменением размера, но я не уверен, что это возможно.

В настоящее время я могу вставлять видео, но они расположены друг под другом в виде столбца. Прокладка не работает, и я не уверен, что делать.

Мой код ниже:

<!DOCTYPE html>
<html>
<link href = "https://fonts.googleapis.com/css2?family=Flamenco:wght@300&display=swap" rel = "stylesheet">
<link href = "style.css" rel = "stylesheet" type = "text/css">
<title>
    Title
</title>
<head>
    <header>
        <div class = "container">
            <img src = "logo.png" alt = "logo" class = "logo" width = "150" height = "50">
        </div>
        <nav>
            <ul>
                <li><a href = "#">Home</a></li>
                <li><a href = "#">Video Archive</a></li>
                <li><a href = "#">Text Archive</a></li>
                <li><a href = "#">About</a></li>
            </ul>
        </nav>
    </header>
</head>
<body>
<div class = "title">
<h1 style = "color:rgb(0, 0, 0)">Title</h1>
<h2 style = "color:#222"> Hook </h2>
</div>


<div class = "featured">
<h3 style = "color:#ffffff">
    Featured Videos:
</h3>
<br><br>

<div id = "videos">
    <p>
        <iframe class = "video1" width = "33%-40" height = "350" src = "https://www.youtube.com/embed/c74kMCOmP80" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class = "caption">Caption 1</div>
    
        <iframe class = "video1" width = "33%-40" height = "350" src = "https://www.youtube.com/embed/c74kMCOmP80" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class = "caption">Caption 2</div>
    
        <iframe class = "video1" width = "33%-40" height = "350" src = "https://www.youtube.com/embed/c74kMCOmP80" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class = "caption">Caption 3</div>
    </p>
</div>
<h3 style = "color:#ffffff">
    Featured Blog Posts
</h3>
<br><br>


</div>

Мой код CSS ниже:

body {

    margin: 0;
    background: rgb(255, 255, 255);
    font-family: 'Flamenco', cursive;
    font-weight: 900;
    

}


header {
    background: #ffffff
}

h1 {
    text-align:center;
    padding-top: 100px;
    
}

h2 {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 40px;
    
}

.title {
    background-color: rgb(255, 255, 255);
}
.featured{
    background-color: #222;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 18;
    padding-bottom: 500px;
}
header::after{
    content:'';
    display:table;
    clear: both;
}

.logo{
    float:left;
    padding: 0px 0;
}



nav{
    float: left;
}

#images p{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 15px;

    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    font-size: 18px;

}
nav a:hover{
    color: rgb(20, 20, 38);
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    background-color: #444;

    position: absolute;
    top:0;
    width: 0%;

    transition: all ease-in-out 250ms;
}



nav a:hover::before{
    width: 100%;

}


    </body>
    
    </html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Этого легко добиться, используя display: flex (или display: grid с более продвинутыми макетами). Узнайте все о гибкости в этой замечательной статье: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

По сути, вы захотите обернуть каждое видео и его заголовок в div:

<div class = "videos">
  <div class = "video">
    <iframe src = "https://www.youtube.com/embed/c74kMCOmP80" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class = "caption">Caption 1</div>
  </div>
  <div class = "video">
    <iframe src = "https://www.youtube.com/embed/c74kMCOmP80" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class = "caption">Caption 2</div>
  </div>
  <div class = "video">
    <iframe src = "https://www.youtube.com/embed/c74kMCOmP80" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class = "caption">Caption 3</div>
  </div>

Затем вы можете применить display: flex к родительскому div всех обернутых видео следующим образом:

.videos {
  display: flex;
  gap: 40px;
}

Это выравнивает все видео подряд (поскольку flex-direction: row применяется по умолчанию) и применяет некоторое пространство между видео с помощью gap-свойства. Это свойство делает его намного проще, чем использование отступов.

Теперь все, что вам нужно сделать, это выровнять видео по вертикали, когда экран становится слишком маленьким. Это делается с помощью медиа-запроса, в котором вы меняете направление вашего flex-контейнера следующим образом:

@media only screen and (max-width: 1100px) {
  .videos {
    flex-direction: column;
  }
}

Чтобы избавиться от черных полос, предлагаю взглянуть на этот вопрос: отключение черных полос на ютубе встроить iFrame. Я не проверял это сам, но он довольно легко нашелся в поиске Google, поэтому я очень верю, что это работает!

Следующее не отвечает на ваш фактический вопрос, но, просмотрев ваш код только что, я вижу некоторые части, которые можно значительно улучшить.

Во-первых, в части <head></head> вашего HTML нет структурного кода, поскольку он предназначен только для метаданных. Одним из таких примеров является тег <title>, в котором должен содержится внутри <head>. Однако <header> должен быть частью вашего <body>. Справка: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

Кроме того, использование display: table не рекомендуется для выравнивания вашего контента. Вышеупомянутые display: flex или display: grid гораздо лучше справляются с созданием хорошей структуры. Дополнительную информацию о сетке можно найти на странице https://css-tricks.com/snippets/css/complete-guide-grid/.

Другие вопросы по теме