شرح تركيب مجموعه فيديوهات
لتحقيق هذا التأثير ، عليك فقط تضمين الكود التالي:

CSS

إذا كنت في منتدى ، فسيتعين عليك تحرير القالب وإدخال كل هذا قبل الإغلاق }]]> أو إضافته من مصمم النموذج.

الكود:

.videocaja {width: 800px;max-width: 100%; margin: 0 auto;}
[id^=video] {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; background: #000;}
[id^=video] iframe,[id^=video] object,[id^=video] embed {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}
[id^=video] img {position: absolute;top: 0;bottom: 0;margin: auto;width: 100%;height: auto;cursor: pointer;}
[id^=video]:after {content: url(http://4.bp.blogspot.com/-IDtvyNN05fU/VUS8QFodKkI/AAAAAAAATgY/gtaenkp-iY0/s1600/play-overlay.png);position: absolute;top: 50%;margin-top: -38px;left: 50%;margin-left: -38px;z-index: 1;cursor: pointer;}
.vacio:after {content:"" !important;}

جافا سكريبت

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

الكود:

<!-- GESTION DE VIDEOS -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$("document").ready(function() {
$("div[id^=video]").click(function() {
var idcaja = $(this).attr("id");
var idvideo = $("#"+idcaja+" img").attr("src").split("/")[4];
var ytvideo = "<iframe src='https://www.youtube.com/embed/" + idvideo + "?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";
$("#"+idcaja).addClass("vacio");
document.getElementById($(this).attr("id")).innerHTML = ytvideo;
});
});
//]]></script>

لغة البرمجة

لدينا كل شيء جاهز ، لذا من الآن فصاعدًا ، في كل مرة تريد تضمين مقطع فيديو في منشور أو صفحة ، عليك فقط تضمين الكود التالي ، مع تعديل تعريف الفيديو فقط.

الكود:

<div class="videocaja"><div id="video1"><img src="http://img.youtube.com/vi/zWCINQn6k0s/hqdefault.jpg" /></div></div>

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

للحصول على أي مقطع فيديو ، ما عليك سوى إلقاء نظرة على عنوان URL الذي سيتم عرضه في متصفحك عند زيارة أحدهم:




أو استخرجه من الرابط الذي يظهر عند النقر فوق