Я хотел бы, чтобы на моем веб-сайте было три видео одинакового размера рядом с отступом около 40 пикселей между каждым видео. Я также хотел бы, чтобы внизу было место для подписи, чтобы иметь краткое описание видео. Я надеюсь, что это будет выглядеть примерно так:
Я также хотел бы, чтобы видео расширялись, чтобы был столбец из трех видео и подписей, если экран не может уместить все три видео в одну строку. Я также хотел бы убедиться, что видео не имеют черных линий сбоку при воспроизведении из-за проблем с изменением размера, но я не уверен, что это возможно.
В настоящее время я могу вставлять видео, но они расположены друг под другом в виде столбца. Прокладка не работает, и я не уверен, что делать.
Мой код ниже:
<!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>
Этого легко добиться, используя 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/.