CSS ile web sayfasının girişinde arka planda video oynatma

Home » Web Tasarımı ve Programlama » Css » CSS ile web sayfasının girişinde arka planda video oynatma
Css Yorum yapılmamış

Bu yazımızda herhengi bir web sayfamıza eklediğimiz videyo css ile açılışta tam ekran olarak nasıl eklemek isteğimize dair kodları paylaşıyoruz.

 <head>  </head>

Etiketleri arasına ekleyeceğimiz css kodu

 

<style type="text/css">  <!--css kod başlangıcı-->
* { 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; }
}
</style><!--css kod bitiş-->
<!--css kod bitiş--> 

 <body </body>

etiketleri arasına Ekleyeceğimi kod


<div class="video-background">
    
<div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe> 
<!--iframe ile başlayan kod kımına youtube üzerinden istediğimiz bir videoya ait iframe kodunu ekliyoruz-->
    </div>

  </div>



<div id="vidtop-content">

<div class="vid-info">
	  
<h1>Video Başlığı ya da herhangi bir açıklama</h1>

	  

<p>video içeriği hakkında bilgi ya da isteğiniz herhangi bir bilgiyi buraya yazabilirsiniz</p>

  </div>
  </div>

YORUM YAP

Time limit is exhausted. Please reload the CAPTCHA.