Problem leaving a fixed video in the background of a Section

Question

( Section background is fixed, but video is not )

Could someone help me get the video fixed equal to bg from Ction?

code:

@import url('https://fonts.googleapis.com/css?family=Paytone+One');
*{
	margin: 0;
	padding: 0;
	font-family: helvetica;
}



header{
	z-index: 5;
	position: fixed;
	width: 100%;
	height: 70px;
	background-color: #fff;
	-webkit-transition: background-color .5s;
}

nav{
	display: table;
	margin: auto;
	margin-top: 15px;
	height: 40px;
	-webkit-transition: margin-left .5s;
}

ul{
	margin-right: 850px;
	display: block;
	float: right;
	list-style: none;
}

ul li{
	float: left;
	margin: 10px;

}

ul a{
	color: #000;
	text-decoration: none;
	-webkit-transition: color .1s;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color: #3F51B5;
    color: #fff;
}
.center{
    text-align: center;
}

.parallax-target{
    min-height: 650px;
    background: transparent center fixed;

}

.parallax-targett{
    min-height: 600px;
    background: transparent;
}
.parallax-targettt{
    min-height: 600px;

}

.middle{
    min-height: 400px;
}
.slide{
	background-image: url(../img/2853636-firewatch-wallpapers.png);
    background-repeat: no-repeat; 
	background-attachment: fixed;
	background-size: cover;
	width: 100%;
	height: 700px;
}
.content{

}

		<section class="slide">
			<div class="content">
<p style="text-align: center;"> <iframe src="http://www.youtube.com/embed/QN_FdiMItvA?autoplay=1&amp;modestbranding=1&amp;nologo=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=opaque&amp;controls=0" width="690" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
				</div>
</section>
	
	

Answer 1

Remove the tag <p> which does not serve to centralise such elements.

You can make video responsive with the maximum width set in the attribute width of iframe. Take the proportion of width and height and insert a jQuery that will center and make your video responsive and centered on the page:

Add the CSS for iframe that will fix and center it:

iframe{
   position: fixed;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
}

Iframe HTML:

<iframe src="http://www.youtube.com/embed/sVxBaRYnjgE?autoplay=1&amp;modestbranding=1&amp;nologo=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=opaque&amp;controls=0" width="690" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

jQuery:

$(window).on("load resize", function(e){
   var vid = $("iframe");

   if(e.type == "load"){
      var vid_w_tag = vid.attr("width");
      var vid_h_tag = vid.attr("height");
      proporcao = vid_w_tag/vid_h_tag;
      vid.attr("width","100%")
      .css('max-width', vid_w_tag+'px');
   }

   var vid_w = vid.width();
   vid.attr('height',vid_w/proporcao);
});