چگونه ایجاد می‌شود: ویدیوی تمام صفحه

آموزش نحوه استفاده از CSS برای ایجاد پس‌زمینه ویدیوی تمام صفحه.

چگونه یک ویدیوی تمام صفحه ایجاد کنیم

قدم اول - اضافه کردن HTML:

<!-- ویدیو -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- اختیاری: ویدیو کا کچھ توضیحی متن -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- کلید کے ذریعے ویدیو کو توقف یا پلے کریں -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

دوسری قدم - سی ایس ایس کو شامل کریں:

/* ویدیو کی تکنیک کو سیٹ کریں: 100% چوڑائی اور اونچائی کے ساتھ پورا ویندوز کا احاطہ کریں */
#myVideo {
  پوزیشن: fixed;
  دائیں: 0;
  نیچل: 0;
  کمترین چوڑائی: 100%;
  کمترین چوڑائی: 100%;
}
/* ویدیو یا صفحہ کے نیچل میں کچھ محتوا کو اضافہ کریں */
.content {
  پوزیشن: fixed;
  نیچل: 0;
  پس منظر: rgba(0, 0, 0, 0.5);
  رنگ: #f1f1f1;
  چوڑائی: 100%;
  پیداواری: 20px;
}
/* ویدیو کو توقف یا پلے کرنے کیلئے استعمال ہونے والی کلید کی تکنیک کو سیٹ کریں */
#myBtn {
  چوڑائی: 200px;
  فونت سائز: 18px;
  پیداواری: 10px;
  کیرنل: none;
  پس منظر: #000;
  رنگ: #fff;
  cursor: pointer;
}
#myBtn:hover {
  پس منظر: #ddd;
  رنگ: کالیمان;
}

تیسری قدم - JavaScript کو شامل کریں:

یا، آپ جس سے JavaScript کو شامل کریں، صرف کلید کو کلک کریں، ویدیو کو توقف یا پلے کریں سکتے ہیں:

مثال

<script>
// ویدیو کو حاصل کریں
var video = document.getElementById("myVideo");
// کلید کو حاصل کریں
var btn = document.getElementById("myBtn");
// ویدیو کو توقف یا پلے کریں اور کلید دکھائی دینو
فونکشن مایفونکشن() {
  اگر (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } دوسرچ کریں {
    video.pause();
    btn.innerHTML = "Play";
  }
}

亲自试一试