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

كود لجعل فيديو يوتيوب عائم و منبثق على بلوجر

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

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

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

تعديل المقال