جعل الفيديو عائم عند النزول
شاهدنا كلنا فيديوهات اليوتيوب و غيرها تظهر بشكل جميل و مميز
عن تصفح موضوع ما و عند النزول لأسفل الصفحة تظهر الفيديوهات بشكل عائم
و تعود للأختفاء عند الصعود لأعلى
إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير 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>
عند اضافة فيديو
و عند اضافة فيديو للتدوينة استخدم هذا الكود مع تغير معرف الفيديو
مثل ماهو موجود بالشرح بالفيديو المرفق
لتحميل الأكواد
فيديو الشرح
يمكن استعمال اي كود لشركة اخرى مع الأخذ بالحسبان تغير الرابط الموجود بالكود
و شكرا لكم
شكرًا لوقتكم واهتمامكم بقراءة موضوع شرح جعل الفيديو الموجود داخلها بشكل عائم عند النزول لأسفل. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.