ตัวอย่างการทำวิดีโออยู่พื้นหลัง เพื่อทำให้สกอร์บอร์ดลอยอยู่เหนือวิดีโอ - Basketball Score Board

ตัวอย่างการทำวิดีโออยู่พื้นหลัง เพื่อทำให้สกอร์บอร์ดลอยอยู่เหนือวิดีโอ

เมื่อเรากด F11 จะทำให้เว็บบราวเซอร์เข้าโหมด Full screen ก็จะได้ภาพวิดีโอเต็มหน้าจอ

และมีส่วนของ Score Board ติดอยู่กับจอด้านล่าง และสามารถเพิ่มปุ่มควบคุมต่างๆ

เช่น ปุ่มควบคุมวิดีโอ ปุ่มเปิด/ปิดความคิดเห็น และอื่นๆที่ต้องวางไว้บนวิดีโอได้อีกด้วย

ภาพประกอบจาก Youtube : https://www.youtube.com/channel/UCDPsA3tAYGUrBM2KVhuv0ow/featured

ส่วนของ HTML

<div id="fullScreenDiv">
        <img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="Full screen background video">
        <div id="videoDiv">           
            <video id="video" preload autoplay muted playsinline loop>
            <source src="video/t12.webm" type="video/webm"></source>
            <source src="video/t12.mp4" type="video/mp4"></source>
            </video> 
        </div>
        <div id="messageBox"> 
            <div>
                <h1>Full screen background video</h1>
                <h2>Would you like this on your site?</h2>
                <h3><a href="#main" class="scrolly">Read below</a></h3>
            </div>
        </div>   
    </div>

The CSS3 styles

/* Default to hide the video on all devices */
#video{display:none}

/* Default to display the image on all devices */
#videosubstitute{display:block;width:auto;height:100%;}

html, body {
    height: 100%;
    margin: 0;
}
#fullScreenDiv{
    width:100%;
    min-height: 100%; 
   /* Set the height to match that of the viewport. */
    height: 100vh;
    width: auto;
    padding:0!important;
    margin: 0!important;
    background-color: gray;
    position: relative;
}
#video{    
    width: 100vw; 
    height: auto;
    object-fit: cover;
    left: 0px;
    top: 0px;
    z-index: 1;
}

@media (min-aspect-ratio: 16/9) {
  #video{
    height: 150%;
    top: -100%;
  }
  #videosubstitute{
    display:block;
    width: 100%;
    height: auto;}
}

@media (max-aspect-ratio: 16/9) {
  #video {
    width: 150%;
    left: -100%;
  }
  #videosubstitute{display:block;width:auto;height:100%;}
}
/*if there is 992  pixels or more, then display the video but hide the image*/
@media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}   

/* The container for our text and stuff */
#messageBox{
    position: absolute;  top: 0;  left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:100%;
}

ที่มา : https://www.imi21.com/background-video-full-screen.php




ระบบบริหารจัดการทีมบาสเกตบอล ด้วย PHP & MySQL
http://blog.phpcodemania.com/2020/07/basketball-management-system.html

PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"

สนใจสั่งซื้อราคาสุดคุ้ม
http://fastcoding.phpcodemania.com