সম্পূর্ণ স্ক্রোল ভিডিও কিভাবে তৈরি করুন:

সম্পূর্ণ স্ক্রোল ভিডিও পটভূমি কিভাবে তৈরি করুন কার্স সিএসএস দ্বারা:

সম্পূর্ণ স্ক্রোল ভিডিও তৈরি কিভাবে

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<!-- 视频 -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- অপশনাল: ভিডিও বর্ণনার জন্য কিছু ওভারলে লেখা -->
<div class="content">
  <h1>শিরোনাম</h1>
  <p>Lorem ipsum...</p>
  <!-- বাটন দ্বারা JavaScript-এর মাধ্যমে ভিডিও স্থগিত/প্লে করুন -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

দ্বিতীয় পদক্ষেপ - CSS যোগ করুন:

/* ভিডিও শৈলী নির্ধারণ: 100% প্রস্থ এবং উচ্চতা যাতে সমগ্র বান্ধাবন আচ্ছাদিত হয় */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
/* ভিডিও/পৃষ্ঠার নিচে কিছু বিষয় যোগ করুন */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
/* ভিডিও স্থগিত/প্লে করার জন্য ব্যবহৃত বাটনের শৈলী নির্ধারণ করুন */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}
#myBtn:hover {
  background: #ddd;
  color: black;
}

তৃতীয় পদক্ষেপ - JavaScript যোগ করুন:

বা, আপনি শুধুমাত্র বাটন ক্লিক করেই JavaScript যোগ করতে পারেন এবং ভিডিও স্থগিত/প্লে করতে পারেন:

প্রকল্প

<script>
// ভিডিও পাওয়া
var video = document.getElementById("myVideo");
// বাটন পাওয়া
var btn = document.getElementById("myBtn");
// ভিডিও স্থগিত এবং প্লে করুন এবং বাটন টেক্সট পরিবর্তন করুন
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } অল্পা {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

亲自试一试