Tanveer Ahmed margin0 pedding0 body fontfamilycalibri san
<!DOCTYPE html>
 <html>
 <head>
    <title>Tanveer Ahmed</title>
    <style type=\"text/css\">
 *{
 margin:0;
 pedding:0;
}
 body {
 font-family:calibri, sans-serif;
 }
 .background-wrap {
 position:fixed;
 z-index: -1000;
 width: 100%;
 height: 100%;
 overflow: hidden;
 top: 0
 left:0;
 }
 #video-bg-elem {
 position:absolute;
 top:0;
 left:0;
 min-height: 100%;
 min-width: 100%
 }
 .content {
 position: absolute;
 width:100%;
 min-height:100%;
 z-index:1000;
   
 }
 .content h1 {
 text-align: center;
 font-size: 65px;
 text-transform: uppercase;
 font-weight: 300;
 color:black;
 padding-top: 15%;
 margin-bottom: 10px;
 }
 .content p {
 text-align: center;
 font-size: 20px;
   
 letter-spacing: 3px;
 color:black;
}
 .content img {
 border-image-width: 20px;
 }
 
   
 
   
 }
    </style>
</head>
 <body>
 
 <div class=\"background-wrap\">
 <video id=\"video-bg-elm\" preload=\"auto\" autoplay=\"true\" loop=\"loop\" muted=\"muted\" >
 <source src=\"video.mp4\" type=\"video/mp4\">
 video not supported
 </video>
 </div>
<div class=\"content\">
 <h1> Beneath The Surface </h1>
 <p>Let\'s see the world <a href=\"https://www.youtube.com/watch?v=vlDzYIIOYmM\" target=\"_blank\"> Together </a>
 </p>
 
 <a href=\"https://www.facebook.com/shahriar.mahfuz\" target=\"_blank\">
 <img src=\"facebook.png\">
 </a>
 <a href=\"https://twitter.com/?lang=en\" target=\"_blank\">
 <img src=\"twitter.png\">
 </a>
   
 </div>
 </body>
</html>
how can I embed those social media icons in the middle and underneath the paragraph. also how can i embed a youtube video in the bottom right corner? please provide the optimized code for this.
Solution
<!DOCTYPE html>
 <html>
 <head>
     <title>Tanveer Ahmed</title>
     <style type=\"text/css\">
 *{
     margin:0;
     pedding:0;
 }
body {
     font-family:calibri, sans-serif;
 }
.background-wrap {
     position:fixed;
     z-index: -1000;
     width: 100%;
     height: 100%;
     overflow: hidden;
     top: 0;
     left:0;
 }
#video-bg-elem {
     position:absolute;
     top:0;
     left:0;
     min-height: 100%;
     min-width: 100%
 }
.content {
     position: absolute;
     width:100%;
     min-height:100%;
     z-index:1000;
 }
.content #ytvideo{
      position: absolute;
       bottom: 5em;
       right: 5em;
     }
 .content h1 {
     text-align: center;
     font-size: 65px;
     text-transform: uppercase;
     font-weight: 300;
     color:black;
     padding-top: 15%;
     margin-bottom: 10px;
 }
.content p {
     text-align: center;
     font-size: 20px;
     letter-spacing: 3px;
     color:black;
    }
   .content img {
     border-image-width: 20px;
    }
 }
 </style>
</head>
 <body>
   <div class=\"background-wrap\">
     <video id=\"video-bg-elm\" preload=\"auto\" autoplay=\"true\" loop=\"loop\" muted=\"muted\" >
     <source src=\"video.mp4\" type=\"video/mp4\">
     video not supported
     </video>
</div>
<div class=\"content\">
    <h1> Beneath The Surface </h1>
       <p>Let\'s see the world <a href=\"https://www.youtube.com/watch?v=vlDzYIIOYmM\" target=\"_blank\"> Together </a>
       </p>
     <br/></br/>
    <center>
     <img src=\"facebook.png\" style=\"height:3em;\">
 </a>     
    <a href=\"https://twitter.com/?lang=en\" target=\"_blank\">
     <img src=\"twitter.png\" style=\"height:3em;\">
 </a>
     </center>
     <iframe id=\"ytvideo\" width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/vlDzYIIOYmM\"></iframe>
      <a href=\"https://www.facebook.com/shahriar.mahfuz\" target=\"_blank\">
 </div>
</body>
</html>




