هل يمكنني إضافة فيديو يوتيوب كنافذة منبثقة في موقعي؟

Mo Ka2 · 3 فبراير 2021

مرحباً،

أحتاج إلى أضافة فيديو يوتيوب يظهر عند الضغط على كلمة معينة أحددها أنا في الموقع، هل يمكن أضافة ذلك؟

أحتاج إلى الكود بـ html.

Abdulraheem Barghouthi · 3 فبراير 2021

يمكنك تطبيق الفكرة الخاص بك من خلال الوسم a الذي يمكنك من إضافة نص عند الضغط عليه يقوم بفتح نافذة منبثقة وتحويلك إلى رابط معين.
إليك الكود التالي مع الشرح:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- العنصر -->
  <a href="https://www.example.com/video" target="_blank">النص الذي تريد أن يظهر للمستخدم</a>
	<!-- ضع رابط الفيديو في الخاصية href -->
	

</body>
</html>

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

Mo Ka2 · 3 فبراير 2021

بتاريخ On 2/3/2021 at 19:03 قال Abdulraheem Barghouthi:
مرحباً @Mo Ka2،

يمكنك تطبيق الفكرة الخاص بك من خلال الوسم a الذي يمكنك من إضافة نص عند الضغط عليه يقوم بالتحويل إلى رابط من إختيارك.

إليك الكود التالي مع الشرح:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
  <a href="https://www.example.com/video" target="_blank">النص الذي تريد أن يظهر للمستخدم</a>
	
	

</body>
</html>
تحياتي.

هل يمكنك مساعدتي في التعديل على هذا الكود:

<link rel="stylesheet" type="text/css" href="https://raw.githack.com/didorahim/arabes1/master/vboxyoutube.css" />

<div id="jquery-script-menu">
  
<a rel="nofollow" href="Javascript:" class="link-lightbox" data-videoid="yez-a-4zRfg" data-videosite="youtube">
  <img src="https://academy.hsoub.com/uploads/monthly_2020_10/Dev-AD3.png.844e8b09490867899c2cabde8233f57a.png"/>
</a>
<br />
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.githack.com/didorahim/arabes1/master/vboxyoutube.js"></script>
  
</div>

يمكنك المعاينة من هنا:https://mkkffodkswow.blogspot.com/

أحتاج لتبديل بين الصورة والنص، مثلاً بدلاً من الضغط على الصورة لفتح الفيديو، يكون هناك نص للضغط عليه لفتح الفيديو.

ايضاً لو أمكن حذف الحقوق، في حال يمكن حذفها.

Ibrahim Issa · 3 فبراير 2021

مرحبا , ان كنت تستخدم مكتبة bootstrap يمكنك وضع الفديو فى modal لشظهر بنفاذة popup فى نفس الصفحة.

كما فى الكود الموضح.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </a>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
            <iframe style="width:100%" height="315" src="https://www.youtube.com/embed/guCwdHngTmM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

هل يمكنني إضافة فيديو يوتيوب كنافذة منبثقة في موقعي؟

السؤال

Mo Ka2

3 أجوبة على هذا السؤال

Recommended Posts

Abdulraheem Barghouthi

Mo Ka2

Ibrahim Issa

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية