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

أبو حسام الدين

10 ديسمبر 2018

(0)

لعلك تسائلت يوما عن كيفية جعل أي فيديو عائم داخل مقالاتك على بلوجر عندم تمرير الصفحة الى الأسفل أو الصعود الى أعلى؟
فعلى الرغم من أن مواقع الويب تعج بكم هائل من الشروحات حول جعل الفيديو عائم على اي موقع وهذا بالإستعانة بإضافات يتم تنصيبها على المتصفح.
ولكن طريقة اليوم ستمكننا من جعل الفيديو عائم داخل المقالة ويقوم بتتبع الزائر الى الأسفل بمجرد النزول لقراءة بقية الموضوع وبعدها يرجع لمكانه الأصلي مباشرة بعد صعودك للأعلى.
في تدوينة سابقة على موقع الجعبة التقنية كنا قد تطرقنا الى كيفية جعل الفيديو متجاوب على مدونة بلوجر للأجهزة اللوحية والحواسيب ويمكن الرجوع اليها من هنا
هذه الطريقة يمكن الإستعانة بها حتى في تضمين ملفات PDF وجعلها متجاوبة على الهواتف الذكية مع إمكانية معاينة مباشرة من داخل المقالة دون الحاجة الى فتحها على موقع drive.google

خطوات جعل الفيديو عائم على بلوجر لفيديوهات يوتيوب

قبل البدء بأي خطوة قم بأخذ نسخة إحتياطية من قالبك في للرجوع اليها في حالة الخطأ

1- قم بتحرير القالب HTML
2- إبحث عن الوسم: </head> بالضغط على Ctrl+F5في لوحة المفاتيح

3- ونلصق فوقه هذا الكود:

انسخ هذا الكود 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>

4-إبحث عن الوسم: </body> بالضغط على Ctrl + F5 في لوحة المفاتيح كذلك
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>

6- ثم نقوم بحفظ القالب

7- قم بإنشاء مقالة جديدة وعند تضمين الفيديو من التبويب HTML ألصق هذا الكود

انسخ هذا الكود 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 عائمة و متجاوبة على بلوجر

إذا كنت تريد إضافة ملف pdf أو كتاب إلكتروني مرفوع على drive فببساطة قم بإستعمال هذا الكود وغير رابط ملفك 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>

- قم بتغيير الرابط الملون الأحمر برابطك الخاص من DRIVE

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

إذا كنت تريد إضافة مقاطع فيديو بخلاف فيديوهات 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>

هذه الطريقة تم طرحها على موقع arlinadzgn الشهير.

ℹ️ إخلاء المسؤولية ☟

ملاحظة مهمة جدا:
▪ تبرئة للذمة أمام الله أولا ثم امام الجميع ثانيا ، فإننا نصرح بأننا قمنا بطرح هذا الموضوع ليستفيد منه الزوار الكرام من جانبه الايجابي فقط، لأننا لسنا على دراية بما تحتويه الملفات الاخرى من محتوى ضار او غير اخلاقي.
و لو تبين لنا الأمر فاننا سنقوم بحذف الموضوع و الاعتذار للجميع
كما نوصي أي شخص له دراية او ملاحظة بخصوص أي محتوى مسيئ بأن يقوم بتنبيهنا في صندوق التعليقات (كفاعل خير و ناصح جزاه الله)
كما أن موقع الجعبة التقنية غير مسؤول عن التطبيقات و لا على المحتوى الذي يتم عرضه داخلها و لا عن أي تغييرات قد تطرأ عليها مستقبلا بعد طرحها للزائر لتحميلها والإستفادة منها.