1. خانه
2. مقاله
3. ایجاد background video برای طراحی وب سایت

ایجاد background video برای طراحی وب سایت

مرحله 1) HTML

اضافه کردن کد HTML زیر:

    <!-- The video -->
    <video autoplay muted loop id="myVideo">
        <source src="rain.mp4" type="video/mp4">
    </video>

    <!-- Optional: some overlay text to describe the video -->
    <div class="content">
        <h1>Heading</h1>
        <p>Lorem ipsum...</p>
        <!-- Use a button to pause/play the video with JavaScript -->
        <button id="myBtn" onclick="myFunction()">Pause</button>
    </div>

 

مرحله 2) CSS

اضافه کردن کدهای CSS زیر:

    
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}
    
 

مرحله 3) javascript

اضافه کردن کدهای جاوااسکریپت زیر:

    
<script>
// Get the video
var video = document.getElementById("myVideo");

// Get the button
var btn = document.getElementById("myBtn");

// Pause and play the video, and change the button text
function myFunction() {
    if (video.paused) {
        video.play();
        btn.innerHTML = "Pause";
    } else {
        video.pause();
        btn.innerHTML = "Play";
    }
}
</script>