<div class="yt-box"> <h2>مشغل فيديو يوتيوب</h2> <input type="text" id="ytUrl" placeholder="ضع رابط فيديو يوتيوب هنا"> <button onclick="loadVideo()">تشغيل</button> <div id="playerBox"></div> </div> <style> .yt-box{ max-width:700px; margin:40px auto; padding:25px; background:#111827; border-radius:18px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.25); } .yt-box h2{ color:#fff; margin-bottom:20px; } .yt-box input{ width:80%; padding:14px; border:none; border-radius:12px; outline:none; font-size:16px; } .yt-box button{ padding:14px 25px; border:none; border-radius:12px; margin-top:15px; cursor:pointer; background:#ef4444; color:#fff; font-size:16px; transition:.3s; } .yt-box button:hover{ transform:scale(1.05); } iframe{ margin-top:25px; width:100%; height:400px; border-radius:15px; } </style> <script> function loadVideo(){ let url=document.getElementById("ytUrl").value; let regExp=/^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/; let match=url.match(regExp); if(match && match[1]){ let videoId=match[1]; document.getElementById("playerBox").innerHTML= `<iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`; }else{ alert("رابط غير صحيح"); } } </script>
