اذهب إلى المحتوى
  • 0

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

Mo Ka2

السؤال

Recommended Posts

  • 0

يمكنك تطبيق الفكرة الخاص بك من خلال الوسم 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>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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>
	<!-- ضع رابط الفيديو في الخاصية href -->
	

</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/

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحبا , ان كنت تستخدم مكتبة 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...