U3F1ZWV6ZTIzMzYwNzkxNjI5X0FjdGl2YXRpb24yNjQ2NDU1Mzk2ODM=
recent
أخبار ساخنة

طريقة جعل فيديو يوتيوب عائم على موقعك في بلوجر عند تمرير الصفحة

طريقة جعل فيديو يوتيوب عائم على موقعك في بلوجر عند تمرير الصفحة

السلام عليكم ورحمة الله تعالي وبركاته مرحبا بكم زوار مدونة معلومات الصدارة في درس اليوم سنقدم إليكم إضافة رائعة وهي جعل فيديو يوتيوب عائم على موقعك في بلوجر عند تمرير الصفحة الى الأسفل أو الصعود الى أعلى.
تابع الشرح:
طريقة جعل فيديو يوتيوب عائم على موقعك في بلوجر عند تمرير الصفحة
جعل فيديو يوتيوب عائم على موقعك في بلوجر عند تمرير الصفحة

خطوات العمل:

- قم بتحرير القالب HTML.
- إبحث عن الوسم: </head>  بالضغط على Ctrl + F  في لوحة المفاتيح  وضع  فوقه الكود التالي:
<style type='text/css'>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
.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}
</style>
- إبحث عن الوسم:</body> بالضغط على Ctrl + F  في لوحة المفاتيح.
- وضع قبله هذا الكود:
<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>
- أحفظ القالب.
- قم بإنشاء مقالة جديدة وعند تضمين الفيديو أضف هذا الكود في محرر النشر HTML.
<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//www.youtube.com/embed/tO01J-M3g0U'></div>
         </div>
      </div>
   </div>
</div>
- قم بتعديل الكود المميز باللون الاحمر برمز فيديو Youtube آخر

- يمكنك معاينة الإضافة من خلال الرابط التالي:

معاينة الإضافة
إن واجهت اي مشكلة أترك تعليق وسنجيب عليك ولا تنسى دعمنا بلاشتراك في المدونة وضغط على زر متابعة.
المصدر موقع: arlinadzgn

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

تعليقك يسعدنا ❤❤

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