Cum să plasați videoclipuri cu făină de YouTube în biletele bloggerului

Cum să plasați Videoclipuri plutitoare de YouTube În paginile sau biletele bloggerului, videoclipurile care plutesc atunci când pagina se deplasează în partea de jos. Poate că multe site -uri web au descoperit pe internet că atunci când un videoclip se reproduce și unul continuă să coboare în publicație, acest videoclip se deplasează în partea paginii, videoclipul va continua să plutească automat în urma paginii încurajând vizitatorul să facă clic pe playerul video.

Videoclipuri plutitoare implementate total responsabile de YouTube pe blogul nostru, servește pentru a menține atenția utilizatorilor în publicația noastră, concentrând atenția asupra videoclipului YouTube adăugat în intrarea noastră pe blogger, dimensiunile ecranului se vor adapta la dispozitivul care este utilizat la acel moment.

Pentru a instala videoclipuri plutitoare de YouTube pe șablonul nostru de blogger, trebuie să urmărim următorul drum.

1 Deschideți panoul de control în Blogger / Tema / Editează HTML. Găsiți eticheta de închidere și adăugați următorul cod CSS în partea de sus

<style>
@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:350px;height:250px;-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>

Putem edita codul CSS marcat pentru a determina poziția video “Jos: 20px; Dreapta: 20px;–

2 În continuare, trebuie să adăugăm următorul cod de script înainte de închidere și faceți clic pe salvare modificări.

<script>
//<!(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>

1 Pentru a plasa videoclipuri plutitoare pe paginile sau biletele noastre, utilizați întotdeauna acest cod HTML în editorul de publicații din secțiune (Vizualizare HTML)

<div class="floatvideo-wrapper">
   <div class="floatvideo">
      <iframe width="600" height="340" src="//www.youtube.com/embed/IDENTIDAD-VIDEO" frameborder="0" gesture="media" allowfullscreen></iframe>
   </div>
</div>

Înlocuiți cuvântul din cod Identitate video Pentru identitatea videoclipului YouTube pe care doriți să îl afișați în publicarea sa.