لعلك تسائلت يوما عن كيفية جعل أي فيديو عائم داخل مقالاتك على بلوجر عندم تمرير الصفحة الى الأسفل أو الصعود الى أعلى؟
فعلى الرغم من أن مواقع الويب تعج بكم هائل من الشروحات حول جعل الفيديو عائم على اي موقع وهذا بالإستعانة بإضافات يتم تنصيبها على المتصفح.
ولكن طريقة اليوم ستمكننا من جعل الفيديو عائم داخل المقالة ويقوم بتتبع الزائر الى الأسفل بمجرد النزول لقراءة بقية الموضوع وبعدها يرجع لمكانه الأصلي مباشرة بعد صعودك للأعلى.
في تدوينة سابقة على موقع الجعبة التقنية كنا قد تطرقنا الى كيفية جعل الفيديو متجاوب على مدونة بلوجر للأجهزة اللوحية والحواسيب ويمكن الرجوع اليها من هنا
هذه الطريقة يمكن الإستعانة بها حتى في تضمين ملفات PDF وجعلها متجاوبة على الهواتف الذكية مع إمكانية معاينة مباشرة من داخل المقالة دون الحاجة الى فتحها على موقع drive.google
2- إبحث عن الوسم: </head> بالضغط على Ctrl+F5في لوحة المفاتيح
3- ونلصق فوقه هذا الكود:فعلى الرغم من أن مواقع الويب تعج بكم هائل من الشروحات حول جعل الفيديو عائم على اي موقع وهذا بالإستعانة بإضافات يتم تنصيبها على المتصفح.
ولكن طريقة اليوم ستمكننا من جعل الفيديو عائم داخل المقالة ويقوم بتتبع الزائر الى الأسفل بمجرد النزول لقراءة بقية الموضوع وبعدها يرجع لمكانه الأصلي مباشرة بعد صعودك للأعلى.
في تدوينة سابقة على موقع الجعبة التقنية كنا قد تطرقنا الى كيفية جعل الفيديو متجاوب على مدونة بلوجر للأجهزة اللوحية والحواسيب ويمكن الرجوع اليها من هنا
هذه الطريقة يمكن الإستعانة بها حتى في تضمين ملفات PDF وجعلها متجاوبة على الهواتف الذكية مع إمكانية معاينة مباشرة من داخل المقالة دون الحاجة الى فتحها على موقع drive.google
خطوات جعل الفيديو عائم على بلوجر لفيديوهات يوتيوب
قبل البدء بأي خطوة قم بأخذ نسخة إحتياطية من قالبك في للرجوع اليها في حالة الخطأ
1- قم بتحرير القالب HTML2- إبحث عن الوسم: </head> بالضغط على Ctrl+F5في لوحة المفاتيح
انسخ هذا الكود CSS
<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>
5- وألص قبله هذا الكود:
انسخ هذا الكود JS
<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>
قم بتغيير الكود باللون الأحمر الى كود تضمين الفيديو الخاص بك
خطوات جعل ملفات PDF عائمة و متجاوبة على بلوجر
انسخ هذا الكود HTML
<div class='floatvideo-wrapper'>
<div class='floatvideo'>
<div class='videoyoutube'>
<div class='video-responsive'>
<div class='video-youtube loader' data-src='//drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview'></div>
</div>
</div>
</div>
</div>
خطوات جعل الفيديو عائم على بلوجر لبقية المنصات الأخرى
إذا كنت تريد إضافة مقاطع فيديو بخلاف فيديوهات Youtube، فهذا يعتمد على الموقع الذي تريد تضمين رابط الفيديو الخاص به أو رابطه المباشر.لإضافة رابط الفيديو من Dailymotion و vidio.com ،أو غيرها من المنصات الأخرى ، إستعمل هذا الكود:
انسخ هذا الكود HTML
<div class='floatvideo-wrapper'>
<div class='floatvideo'>
<iframe width='600' height='340' src='رابط الفيديو هنا' frameborder='0' gesture='media' allowfullscreen></iframe>
</div>
</div>
تعليقات
إرسال تعليق
مرحبا بكم على مدونة الجعبة التقنية
نشكركم على زيارة موقعنا والإستفادة من المحتوى المقدم
سيتم الرد على استفساراتكم فور دخول الأدمن
شكرا لكم