Problem in leaving a video fixed in the background of a section

Question

Problem in leaving a video fixed in the background of a section

Navigation

#1 by (1 votes)

0

(thebackgroundofthesectionisfixed,butthevideoisnot)

Couldanyonehelpmetoleavethefixedvideoequaltosectionbg?

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>

html css

asked by anonymous 05.01.2018 / 00:50

1 answer

JavaScript property definition error Do something after an external script is fully loaded via jQuery append

score 1 · Accepted Answer

Remove the <p> tag that is not used to center elements of this type.

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

Add CSS for iframe that will fix it 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);
});