0
私は自分のウェブサイトの背景としてyoutubeビデオを使用しています。私の問題は、最初のセクションでこのビデオの背景を使用する必要があることです。私のウェブサイト全体では、YouTubeのビデオ背景があります。 これはこれは私が事前に最初のセクションのYoutubeの背景
感謝を使用しているcodepenのリンクである私のウェブサイトのURL
です。
私のcssファイル
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#vidtop-content {
top: 0;
color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
.pattern {
background-image: url(../images/bg/pattern.png);
background-repeat: repeat;
background-attachment: scroll;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}<section class="bg">
<div class="pattern"></div>
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/DEDS-bSHRfI?controls=1&showinfo=1&rel=0&autoplay=1&loop=1&list=UUcvz3BO8w38d-595tTctOlg&ecver=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<!--end-->
\t \t \t \t <section id="welcome" class="scroll-section clearfix smoothScroll">
\t \t \t \t \t <img class="welcome-logo" alt="Abra logo" width="465" height="143" src="images/logo/logo2017.png" />
\t \t \t \t \t <h2><span>Welcome</span></h2>
\t \t \t \t \t <!--<h2><span>VMSD solution provider</span></h2>-->
\t \t \t \t \t <h4><span><img src="images/extra/mousescroll.gif" /></span></h4>
\t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t </section>
\t \t \t
\t \t \t \t <span class="pin-trigger"></span>
\t \t \t \t
\t \t \t \t <div id="pin-outer" class="clearfix">
\t \t \t \t \t <div id="pin-inner" class="clearfix">
\t \t \t \t \t \t <section id="about" class="scroll-section clearfix smoothScroll">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <h1><span>Who We Are</span></h1>
\t \t \t \t \t \t \t \t <div class="content-box clearfix">
\t \t \t \t \t \t \t \t \t <p>Launched in 1992, ABRA is today the name synonymous with VM & SD in the region. One salient feature in this journey has been the emphasis on quality of products and services. ABRA is now focused on design, project management and production of luxury retail solutions across travel retail and local markets in India, Middle East & Africa.</p>
\t \t \t \t \t \t \t \t \t <div class="fact fact-left">
\t \t \t \t \t \t \t \t \t \t <h4 class="fact-value">25</h4>
\t \t \t \t \t \t \t \t \t \t <h4 class="fact-text">Years Of Service</h4>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="testimonial">
\t \t \t \t \t \t \t \t \t <span class="speech-open"></span>
\t \t \t \t \t \t \t \t \t <p>ABRA Visual Merchandising and Store Design handles a project from concept to technical design and then from production to installation. We are the one-stop-shop for design & production, specializing in luxury brands for the retail sector in Middle East ,Africa & India<!--<strong>Highstreet Retailer</strong>--></p>
\t \t \t \t \t \t \t \t \t <span class="speech-close"></span>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t \t \t \t \t <span class="dash-right"></span>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </section>
\t \t \t \t \t \t
\t \t \t \t \t \t <section id="types-of-repair" class="scroll-section clearfix smoothScroll">
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="product-wrap-outer">
\t \t \t \t \t \t \t \t <div class="product-wrap clearfix">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t <div class="product-box">
\t \t \t \t \t \t \t \t \t \t \t \t \t <h3><span>K Govindan</span></h3>
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><span><strong>Founder & Director</strong></br>Govindan is the Founder and Managing Director of the Company. Having a long track record of over a decade in advertising, holding various positions in leading agencies like JWT, Govindan began his business in 1992 by setting up a small screen printing unit catering mainly to the gifts and give-aways market in the UAE. Later, he only pioneered the concept of Visual Merchandising and Store design in the UAE.</span></p>
\t \t \t \t \t \t \t \t \t \t \t \t \t <img width="265" height="430" src="images/team/Who03.jpg" class="attachment-product-image size-product-image wp-post-image" alt="Washing Machine Repair" srcset="images/team/Who03.jpg" sizes="(max-width: 265px) 100vw, 265px" /> \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t <div class="product-box">
\t \t \t \t \t \t \t \t \t \t \t \t \t <h3><span>Anand Kumar</span></h3>
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><span><strong>Executive Director</strong></br>Anand is the face of ABRA VM SD, starting as a young and dynamic team member of the company he has now grown over the years as a capable leader overseeing staff strength of 200+. He has worked closely with brands and studied the market trends in the industry for almost a decade; along with successfully managing to further develop ABRA as a brand and diversifying ABRA’s offering to the market. This, in effect has placed ABRA VM SD as one of the leading production facilities trusted by the luxury market in the MEA region.</span></p>
\t \t \t \t \t \t \t \t \t \t \t \t \t <img width="265" height="430" src="images/team/Who04.jpg" class="attachment-product-image size-product-image wp-post-image" alt="TV Repair" srcset="images/team/Who04.jpg" sizes="(max-width: 265px) 100vw, 265px" /> \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t <div class="product-box">
\t \t \t \t \t \t \t \t \t \t \t \t \t <h3><span>Karthik K</span></h3>
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><span><strong>Operations Director</strong></br>Karthik started his career in a junior admin role at ABRA back in 2000 and steadily grew in rank, establishing his proficiency in the industry through roles in sales, project management and eventually production. Currently he heads the operations at ABRA and oversees the core production function. Having worked with over 35 leading consumer and luxury brands over the past 16 years, he has a thorough understanding of what works in the industry.</span></p>
\t \t \t \t \t \t \t \t \t \t \t \t \t <img width="265" height="430" src="images/team/03.jpg" class="attachment-product-image size-product-image wp-post-image" alt="Mobile & Tablet Repair" srcset="images/team/03.jpg" sizes="(max-width: 265px) 100vw, 265px" /> \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t <div class="product-box">
\t \t \t \t \t \t \t \t \t \t \t \t \t <h3><span>Lorem Ipsum</span></h3>
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><span><strong>Operations Director</strong></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum vitae nisl ac efficitur. Integer vel turpis a velit gravida auctor. Nulla auctor, purus eu ullamcorper scelerisque, nunc magna euismod urna, quis sollicitudin sem ex id enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent gravida vulputate imperdiet. Praesent iaculis nunc eu metus ullamcorper venenatis. Fusce accumsan eu justo at auctor.</span></p>
\t \t \t \t \t \t \t \t \t \t \t \t \t <img width="265" height="430" src="images/team/Who05.jpg" class="attachment-product-image size-product-image wp-post-image" alt="Lawnmower Repair" srcset="images/team/Who05.jpg" sizes="(max-width: 265px) 100vw, 265px" /> \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t <div class="product-box">
\t \t \t \t \t \t \t \t \t \t \t \t \t <h3><span>Lorem Ipsum</span></h3>
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><span><strong>Operations Director</strong></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum vitae nisl ac efficitur. Integer vel turpis a velit gravida auctor. Nulla auctor, purus eu ullamcorper scelerisque, nunc magna euismod urna, quis sollicitudin sem ex id enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent gravida vulputate imperdiet. Praesent iaculis nunc eu metus ullamcorper venenatis. Fusce accumsan eu justo at auctor.</span></p>
\t \t \t \t \t \t \t \t \t \t \t \t \t <img width="265" height="430" src="images/team/Who05.jpg" class="attachment-product-image size-product-image wp-post-image" alt="Electrical Repair" srcset="images/team/Who05.jpg" sizes="(max-width: 265px) 100vw, 265px" /> \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span class="swipe-icon"></span>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t \t \t \t
\t \t \t \t \t \t </section>
\t \t \t \t \t \t
\t \t \t \t \t \t <section id="appliance-rework" class="scroll-section clearfix smoothScroll">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <h2><span>What we do</span></h2>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="content-box clearfix">
\t \t \t \t \t \t \t \t \t <p>Offering a full fledged in-house solution for execution of retail display & store furniture, for our clients this translates into ABRA being the one-stop for their project needs enabling them to eliminate having to source individual components from multiple suppliers & at the same time giving us better control costs, quality & timelines.</p>
<p>Our commitment to excellence has earned us the loyal support of a number of international clients with specialized display requirements. Travel retail projects, stand alone boutiques, Shop in Shops, Shop Fixtures & Brand Animations that include Mall podiums, Store Windows, In-store promotions - you name it; ABRA understands visual merchandising. What works and why. And we have proven our skills delivering stunning displays to leading brands in the world.</p>
\t \t \t \t \t \t \t \t \t <div class="fact fact-left">
\t \t \t \t \t \t \t \t \t \t <h4 class="fact-value mar22">150</h4>
\t \t \t \t \t \t \t \t \t \t <h4 class="mar20">HIGHLY TRAINED STAFF</h4>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="testimonial testimonial1" id="width512">
\t \t \t \t \t \t \t \t \t <span class="speech-open"></span>
\t \t \t \t \t \t \t \t \t <p>VM&SD displays are an essential component of any brand marketing program in todays mall centered buying culture. Securing and maintaining effective product placement and consistent brand identity are critical to the successful retail marketing of any product. After all, the best product won't sell if potential buyers don't know it's there.</p>
\t \t \t \t \t \t \t \t \t <div style="width: 100%">
\t \t \t \t \t \t \t \t \t <div class="hexagon1 hexagon21 imgContainer" ><div class="hexagon-in11 hexa"><div class="hexagon-in21"></div></div></div>
\t \t \t \t \t \t \t \t \t <div class="hexagon hexagon2 imgContainer" ><div class="hexagon-in1 hexp"><div class="hexagon-in2"></div></div></div>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <span class="speech-close"></span>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t \t \t \t \t <span class="dash-left"></span>
\t \t \t \t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t \t \t \t \t \t \t \t \t \t </section>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <span class="pin-trigger2">
\t \t \t \t \t <span class="dash-vert"></span>
\t \t \t \t </span>
\t \t \t \t
\t \t \t \t <div id="pin-outer2" class="clearfix">
\t \t \t \t \t <div id="pin-inner2" class="clearfix">
\t \t \t \t \t \t <section id="product-evaluation" class="scroll-section clearfix smoothScroll">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <h2><span>Automated Production Unit</span></h2>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="content-box clearfix">
\t \t \t \t \t \t \t \t \t <p>Scheduled to open in December 2016, our new own factory is a sprawling 120,000 sqft building. It will have the most modern material handling and movement procedures to ease from storage to production and further to packing and delivery.</br>
Currently ABRA operates from a rented premises of 60,000 sqft in 2 different locations. We are well equipped to meet your brands standards in joinery, painting, acrylic and print divisions with the state of the art routers and laser cutting equipment. Our 35,000 sq.ft. air conditioned workshop & multi shift operation ensures that we have the capacity to handle multiple projects at a time, while maintaining work quality & efficiency throughout the production process.</p>
\t \t \t \t \t \t \t \t \t <div class="fact fact-left">
\t \t \t \t \t \t \t \t \t \t <h4 class="fact-value">120,000</h4>
\t \t \t \t \t \t \t \t \t \t <h4>sq ft Factory</h4>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="testimonial">
\t \t \t \t \t \t \t \t \t <span class="speech-open"></span>
\t \t \t \t \t \t \t \t \t <p>If you take a walk on our production floor, at any given point of time, you can see the careful attention to detail on all jobs, large or small.We have an impeccable heritage of "making the customer whole", delivering exactly what the customer expected, defect free, and when they expect it. The fabrication and joinery unit has the state of the art machines with expert technicians playing the lead roles ensuring superior quality and finish. Latest machines operated by skilled and experienced personnel, is our major highlight. CNC routers, Laser cutters, Dust free Paint booth, Clean fabrication unit, Large assembly area for final inspection all contribute to the delivery of a well received display that glow in a mall.</strong></p>
\t \t \t \t \t \t \t \t \t <span class="speech-close"></span>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t \t \t \t \t <span class="dash-right"></span>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t \t </section>
\t \t \t \t \t \t
\t \t \t \t \t \t <section id="appliance-suppliers" class="scroll-section clearfix smoothScroll">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="suppliers-wrap-outer">
\t \t \t \t \t \t \t \t \t <h2><span>Prompt Delivery</span></h2>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <div class="content-box clearfix">
\t \t \t \t \t \t \t \t \t \t <p>Innumerable projects, thousands of locations, hundreds of malls, duty free shops , stores and many countries. Precisely, 32 countries. In the Europe, Italy, Switzerland, UK and Germany, Russia, India, Maldives in Africa South Africa, Namibia, Ghana, Nigeria, Tunisia, Ivory Coast, Egypt, Burkino Faso, Morocco, Uganda, Kenya, Senegal, Angola, Zambia, Ethiopia, Rwanda, Cote D’ vor in the Arab nations Lebanon, Jordan, Oman, Qatar, Bahrain, Saudi Arabia and UAE. It’s an impressive list.</br>All these countries we have delivered, installed projects of various sizes in different locations. On time. Within the Budget. And ofcourse not pinching the pocket much. This is one of the reasons many big brands trust us.</p>
\t \t \t \t \t \t \t \t \t \t <div class="fact" id="margin32">
\t \t \t \t \t \t \t \t \t \t \t <h4 class="fact-value">32</h4>
\t \t \t \t \t \t \t \t \t \t \t <h4>Countries</h4>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="testimonial">
\t \t \t \t \t \t \t \t \t \t <p><img src="images/bg/trucks.jpg"></p>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="logo-wrap">
\t \t \t \t \t \t \t \t \t <div class="logo-wrap-inner">
\t \t \t \t \t \t \t \t \t \t <span class="grad-left"></span>
\t \t \t \t \t \t \t \t \t \t <div id="logo-list"></div>
\t \t \t \t \t \t \t \t \t \t <span class="grad-right"></span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <span class="dash-bottom"></span>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t \t </section>
ありがとうございます。位置を変更した後であっても：固定されていません。私はjavascriptまたはjqueryで試してみましょう – secondsight
javascriptは私のために働いています – secondsight