Блог

Главная - Вопросы по программированию - Размещение текста абзаца рядом с видео на YouTube?

Размещение текста абзаца рядом с видео на YouTube?

#css

#css

Вопрос:

Кто-нибудь знает, как поместить

тег рядом с видео на YouTube без создания дополнительного пространства между рамкой и видео по вертикали? Например, я пытаюсь поместить текст в правую часть первого видео, но он продолжает создавать дополнительное пространство между видео и рамкой, где написано vide.

 <!DOCTYPE html
<html lang="en">
<meta charset="UTF-8">
<head>
<title>007 Nightfire | Videos</title>
</head>
<style>
.div1 {
    background-color:#77BFC7;
    text-align:center;
    font-size:50px;
    border:1px solid #77BFC7;
    height:70px;
    font-weight:bold;
}
body {
    background-color:#00AAFF;
}
hr {
    height:0px;
    background-color:#000000;
    border:solid;
}
</style>
<body>
<div class="div1">
Videos
</div>
<center>
<iframe width="520" height="300" 
src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<br>
<br>
<hr>
<iframe width="520" height="300"
src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</body>
</html>

Ответ №1:

Вам просто нужен div со встроенным стилем и плавающий текст справа. Я бы также рекомендовал изменить тег center на div, поскольку это не рекомендуемый HTML5 способ центрирования материала.

 .div1 {
  background-color: #77BFC7;
  text-align: center;
  font-size: 50px;
  border: 1px solid #77BFC7;
  height: 70px;
  font-weight: bold;
}

body {
  background-color: #00AAFF;
}

hr {
  height: 0px;
  background-color: #000000;
  border: solid;
} 
 <div class="div1">
  Videos
</div>
<center>
  <div style="display: inline-block;">
    <iframe width="520" height="300" src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
                </iframe>
    <p style="float: right">Text Content Here</p>
  </div>
  <br>
  <br>
  <hr>
  <iframe width="520" height="300" src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
            </iframe>
</center>
Метки: