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