1881 ⁓ 193∞
Seçkin Üye
Merhaba dostlar ben TRKByte. Bir yandan mobil uygulama geliştirirken forumu boş bırakmak istemedim. Bu konuda Ekrandaki Laptop içinde video oynatmayı sağlayacağız. İsterseniz anlatıma ve kodlara geçelim.
- Öncelikle bir klasör açın ve içerisine index.html , style.css adlı iki dosya ve res adlı bir klasör oluşturalım. Daha sonra kodlarımızı yazalım. Örn;
- Dosyaları açtıktan sonra index.html dosyamıza kodları girelim.
HTML:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>TRKByte VIDEO OYNATICI</title>
</head>
<body>
<div class="laptop">
<img src="res/laptop.png" alt="">
<video src="res/video.mp4" controls></video>
</div>
</body>
</html>- index.html kodlarını girdik. Şimdi ise style.css dosyamızı açıp kodlarımızı girelim.
CSS:
/*TRKByte*/
body{
margin: 0;
padding: 0;
background: #333;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.laptop{
width: 100%;
max-width: 800px;
position: relative;
}
.laptop img{
width: 100%;
}
.laptop video{
position: absolute;
width:79.2%;
height: 70%;
background: #333;
top: 1%;
left: 10.2%;
}
/*TRKByte*/- style.css dosyamızı da ekledik. Son olarak ekte bıraktığım Laptop.png'yi res klasörüne atın. Videoyu ise belirledikten sonra res klasörüne video.mp4 olarak atın. İyi günler dilerim.