تصميم صندوق لإظهار فيديو يوتوب بواسطة الرابط الخاص به فقط PHP - HTML - Dzworkers

تصميم صندوق لإظهار فيديو يوتوب بواسطة الرابط الخاص به فقط PHP - HTML

18-12-2021

1170

تصميم المواقع و التطبيقات

NewMediene

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

في هذا المثال نحتاج القليل من أكواد البرمجة PHP - HTML - CSS

1- ملف index.php سيكون بمثابة صفحة لإضافة و عرض فيديو اليوتوب

<!DOCTYPE html>
<html>
    <head>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >

        <link rel="stylesheet" href="http://www.dzworkers.com/demo/css/home.css">    

        <link rel="icon" href="http://www.dzworkers.com/demo/img/icon.png" >
		
		<title>Youtube</title>
        
    </head>

    <body>

        <div class="container" >

            <div class="logo" ><a href="http://www.dzworkers.com" ><img src="http://www.dzworkers.com/demo/img/logo.jpeg" /></a></div>

            <div class="youtube" >

                <?php
                if(isset($_POST['add'])){
                    
                    $title    = strip_tags(trim($_POST['title']));
                    $urlvideo = strip_tags(trim($_POST['urlvideo']));
                    
                    if(filter_var($urlvideo, FILTER_VALIDATE_URL) AND preg_match("/youtube.com/i",$urlvideo) == 1){
                                        
                         if(preg_match("/www.youtube.com/i",$urlvideo) == 1){
                            $correcteUrl = str_replace("https://www.youtube.com/watch?v=","",$urlvideo); 
                
                        }else if(preg_match("/youtube.com/i",$urlvideo) == 1){
                            $correcteUrl = str_replace("https://youtube.com/watch?v=","",$urlvideo);
        
                        }
        
                    }else if(filter_var($urlvideo, FILTER_VALIDATE_URL) AND preg_match("/youtu.be/i",$urlvideo) == 1){
                                        
                        if(preg_match("/www.youtu.be/i",$urlvideo) == 1){
                            $correcteUrl = str_replace("https://www.youtu.be/","",$urlvideo);
                    
                        }else if(preg_match("/youtu.be/i",$urlvideo) == 1){
                            $correcteUrl = str_replace("https://youtu.be/","",$urlvideo);
                    
                        }
        
                    }else{
        
                        $correcteUrl = "";
        
                    }                       
                                    
                    if(!empty($title) OR !empty($correcteUrl)){
        
                        if(isset($correcteUrl)){ ?>                         
                        
                            <div class='post' >

                                <h3><?php echo $title ?></h3>

                                <!--- IMAGE VIDEO YOUTUBE --->
                                <img src="https://i.ytimg.com/vi/<?php echo $correcteUrl ?>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLC3R5kiRBS9OAjnrs58nd_LlfaPPw" />

                                <!--- VIDEO YOUTUBE --->
                                <iframe src="<?php echo "https://www.youtube.com/embed/".$correcteUrl ?>?rel=0&controls=0" title="<?php echo $title ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                            </div>                        
                                            
                        <?php }
                
                    }else {
        
                        echo "<div class='post' >يوجد خانة فارغة !</div>";
        
                    }
        
                }// --- ?>

                <form id="forminput" method="POST" >

                    <div class="title" ><p>إضافة فيديو يوتوب جديد</p></div>

                    <div class="inputclass" ><p>عنوان الفيديو</p><input type="text" name="title" required></div>
                    
                    <div class="inputclass" ><p>رابط اليوتوب</p><input type="url" name="urlvideo" required></div>

                    <div class="submitclass" >
                        <input type="submit" name="add" value="إضافة فيديو" >
                    </div>              

                </form>

            </div>            
        
        </div>

    </body>

</html>

نبذة عن الموقعـ

Dzworkers - عمال الجزائر

تواصلـ معنـا

القوانين