جعل الفيديو تطفو عندما يتم تمرير الصفحة
كيف تجعل الفيديو يطفو عندما يتم تمرير الصفحة ؟ ربما تكون قد شاهدت مقاطع فيديو على Youtube أو Fucking أو مواقع أخرى عندما يتم تشغيل الفيديو وانتقل إلى أسفل الصفحة ، فسيتبع الفيديو تلقائيًا حيث تقوم بالتمرير الصفحة. إن الطريقة التي تعمل بها من النصائح التي سأشاركها هي نفسها تقريبًا ، لكن الفرق هو أن الفيديو سوف يظل ينجرف بعد الصفحة التي نسير فيها حتى لو لم يتم تشغيل الفيديو.
منذ بعض الوقت ، قمت بمشاركة بعض النصائح حول كيفية تثبيت مقاطع فيديو Youtube المستجيبة على المدونات، بهذه الطريقة ، سيتبع فيديو Youtube الذي تم إضافته في المنشور تلقائيًا أبعاد شاشة الجهاز الذي تستخدمه. حسنًا ، في هذا الوقت ، ستجمع Arlina Design بين نصائح الفيديو سريعة الاستجابة ونصائح الفيديو العائمة عند التمرير. بالنسبة لأولئك المهتمين ، يمكنهم اتباع الخطوات التالية.
جعل الفيديو تطفو عندما يتم تمرير الصفحة
طريقة التركيب
توجة الى المظهر ثم تحرير HTML ثم قم بالبحث عن /head وقم بوضع الكود فوقة الى قبلة.
<style type='text/css'>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.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}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>توجة الى المظهر ثم تحرير HTML ثم قم بالبحث عن /body وقم بوضع الكود فوقة الى قبلة.
<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='####################################'></div>
</div>
</div>
</div>
</div>لوضع الفيديوعلى اليوتيوب استبدل #################### الي الفيديو المراد اضافتة مثال
https://www.youtube.com/watch?v=57ToqDocjzE&t
الي
https://www.youtube.com/embed/57ToqDocjzE&t
او
<div class='floatvideo-wrapper'>
<div class='floatvideo'>
<iframe width='600' height='340' src='###################' frameborder='0' gesture='media' allowfullscreen></iframe>
</div>
</div>
استبدل ############# الي الفيديو المراد مثل https://www.youtube.com/watch?v=57ToqDocjzE&t
تعليقات
إرسال تعليق