U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

تصفح التدوينة مع جعل الفيديو الموجود داخلها بشكل عائم عند النزول لأسفل

تصفح التدوينة مع جعل فيديو اليوتيوب بشكل عائم


شاهدنا كلنا فيديوهات اليوتيوب و غيرها تظهر بشكل جميل و مميز

عن تصفح موضوع ما و عند النزول لأسفل الصفحة تظهر الفيديوهات بشكل عائم 

و تعود للأختفاء عند الصعود لأعلى


يمكنكم معاينة الأضافة من هنــا





معاينة الأضافة








طريقة التركيب




إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML

إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث

بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب





البحث عن </head> او /head  او /head>  اضافة الكود  قبله







<style type='text/css'>@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}</style>







ثم بحث عن هذا الوسم </body> وأضف الرمز  قبله 






<script type='text/javascript'>
//<![CDATA[
// Video Melayang
var $window=$(window),$floatvideoWrap=$(".floatvideo-wrapper"),$floatvideo=$(".floatvideo"),floatvideoHeight=$floatvideo.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvideo.addClass("fly")):($floatvideoWrap.height("auto"),$floatvideo.removeClass("fly"))}),setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>





عند اضافة فيديو



و عند اضافة فيديو للتدوينة استخدم هذا الكود مع تغير معرف الفيديو

مثل ماهو موجود بالشرح بالفيديو المرفق


لتحميل الأكواد






أو من هنا



تحميل الأكواد

فيديو الشرح









يمكن استعمال اي كود لشركة اخرى مع الأخذ بالحسبان تغير الرابط الموجود بالكود


و شكرا لكم








الاسمبريد إلكترونيرسالة