<script src=\'http://code.jquery.com/jquery-latest.js\' type=\'text/javascript\'></script>
<script type=\'text/javascript\'>
//<![CDATA[
// Lazy loading of youtube videos by MS-potilas 2012. Needs jQuery.
// طريقة الاستخدام نسخ الكود بالأسفل ووضعه مباشرة داخل الموضوع بعد التعديل
// <a class="youtube-lazy-link" style="width:560px;height:315px;" href="https://www.youtube.com/watch?v=الأى دى الخاص بالفيديو">عنوان الفيديو</a>
// - يمكنك تغيير ابعاد الفيديو
// Source: http://www.abu-iyad.com/2014/10/youtube-videos-lazy-load.html
$(document).ready(function() {
$("a.youtube-lazy-link").each(function(index) {
var embedparms = $(this).attr("href").split("/embed/")[1];
if(!embedparms) embedparms = $(this).attr("href").split("://youtu.be/")[1];
if(!embedparms) embedparms = $(this).attr("href").split("?v=")[1].replace(/&/,\'?\');
var youid = embedparms.split("?")[0].split("#")[0];
var start = embedparms.match(/[#&]t=(d+)s/);
if(start) start = start[1];
else {
start = embedparms.match(/[#&]t=(d+)m(d+)s/);
if(start) start = parseInt(start[1])*60+parseInt(start[2]);
else {
start = embedparms.match(/[?&]start=(d+)/);
if(start) start = start[1];
}
}
embedparms = embedparms.split("#")[0];
if(start && embedparms.indexOf("start=") == -1)
embedparms += ((embedparms.indexOf("?")==-1) ? "?" : "&") + "start="+start;
if(embedparms.indexOf("showinfo=0") != -1)
$(this).html(\'\');
else
$(this).html(\'<div class="youtube-lazy-link-info">\' + $(this).html() + \'</div>\');
$(this).prepend(\'<div style="height:\'+(parseInt($(this).css("height"))-4)+\'px;width:\'+(parseInt($(this).css("width"))-4)+\'px;" class="youtube-lazy-link-div"></div>\');
$(this).css("background", "#000 url(http://i2.ytimg.com/vi/"+youid+"/0.jpg) center center no-repeat");
$(this).attr("id", youid+index);
$(this).attr("href", "http://www.youtube.com/watch?v="+youid+(start ? "#t="+start+"s" : ""));
var emu = \'http://www.youtube.com/embed/\'+embedparms;
emu += ((emu.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
var videoFrame = \'<iframe width="\'+parseInt($(this).css("width"))+\'" height="\'+parseInt($(this).css("height"))+\'" style="vertical-align:top;" src="\'+emu+\'" frameborder="0" allowfullscreen></iframe>\';
$(this).attr("onclick", "$(\'#"+youid+index+"\').replaceWith(\'"+videoFrame+"\');return false;");
});
})
//]]>
</script>
<style type=\'text/css\'>
a.youtube-lazy-link {
vertical-align:top;
background:#555;
width:560px; height:315px;
background-size:cover;
text-decoration:none;
color:#DDD;
text-align:left;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
display:inline-block;
}
a.youtube-lazy-link:hover {
text-decoration:none;
color:#FFF;
}
.youtube-lazy-link-div {
border:2px solid #000;
background: url(http://lh4.googleusercontent.com/-QCeB6REIFlE/TuGUlY3N46I/AAAAAAAAAaI/9-urEUtpKcI/s800/youtube-play-button.png) center center no-repeat;
position:absolute;
}
.youtube-lazy-link-div:hover {
background: url(http://lh4.googleusercontent.com/-ywkTvQ4VohA/T455cg8_PRI/AAAAAAAAAq4/qfUJoK13InI/s800/youtube-play-button-hover-red.png) center center no-repeat;
}
.youtube-lazy-link-info {
font-size: 110%;
padding: 2px 6px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
</style>