CODEWITHSUNDEEP
css
Will Ras 707
Will Ras 707

Reputation: 1

Putting paragraph text next to a youtube video?

Anyone know how to put a

tag next to the youtube videos without creating extra line space between the border box and the video vertically? Like I'm trying to put text in the right side of the first video but it keeps making extra space between the video and the border box where it says 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>

Upvotes: 0

Views: 900

Answers (1)

Brandon Benbow
Brandon Benbow

Reputation: 11

You just need a div with inline style, and to float the text to the right. I'd also recommend to change the center tag to a div, as its not the recommended HTML5 way to center stuff.

.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>

Upvotes: 1

Related Questions