انشاء زر عند الظغط علية يظهر فيديو

0 90

انشاء زر عند الظغط علية يظهر فيديو[Create a button, when you click on it, a video appears
اضافة زر عند الظغط علية يظهر لك فيديو 

انشاء زر عند الظغط علية يظهر فيديو

  1. قم بانشاء ملف HTMl
  2. قم بانشاء ملف CSS  واربطه في صفحة Html 
  3. قم بانشاء ملف بصيغة JS (ملف جافا سكريبت) ورابطه في صفحة  Html

 ملاحظة : 

يمكنك عدم انشاء ملف بصيغة JS ….لان يمكنك كتابة كود جافا سكريبت داخل صفحة Html
باستخدام الوسم  <script>……

سيكون شكل الزر كما موجود في الفيديو ويمكنك التعديل عليه..

كود Html

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Ahmed video </title>
 
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
 
<div class=”modal”>
    <a href=”#” class=”btn”> عرض الفديو</a>
    <div class=”video-container”>
        <span class=”close”> &#10006; </span>
        <video src=”ضع اسم الفيديو الذي تريده ان يظهر” controls></video>
    </div>
</div>
 
<script src=”main.js”></script>
</body>
</html>

كود CSS

*{ margin: 0; padding: 0; box-sizing: border-box; }
 
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
}
 
.btn{
text-decoration: none;
padding: 15px 40px;
background-color: rgb(255,122,0);
color: #fff;
border-radius: 40px;
font-family: ‘Century Gothic’;
font-weight: bolder;
box-shadow: 0 10px 40px rgba(255,122,0,0.4);
}
 
.video-container{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 99999;
background-color: rgba(255,122,0,0.1);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
 
.video-container .close{
position: absolute;
top: 10px; right: 25px;
font-size: 20px;
cursor: pointer;
}
 
.video-container video{
width: 90%;
max-width: 800px;
transform: scale(0);
box-shadow: 0 20px 20px rgba(0,0,0,0.2);
outline: none;
transition: all 0.3s;
}
 
.video-container.show{
pointer-events: all; opacity: 1;
}
 
.video-container.show video{ transform: scale(1); }

كود Javascript..

const btn = document.querySelector(‘.btn’);
const videoContainer = document.querySelector(‘.video-container’);
const close = document.querySelector(‘.close’);
 
btn.addEventListener(‘click’,()=>{
    videoContainer.classList.add(‘show’);
})
 
close.addEventListener(‘click’,()=>{
    videoContainer.classList.remove(‘show’);
})

ويمكنك ايضا تحميل الملفات جاهزة من قناتنا في التلكرام  والتعديل عليها  ?

تحميل الان

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

يستخدم هذا الموقع ملفات تعريف الارتباط لتحسين تجربتك. سنفترض أنك موافق على ذلك ، ولكن يمكنك إلغاء الاشتراك إذا كنت ترغب في ذلك. قبول قراءة المزيد