Când încorporați un videoclip în WordPress, implicit aceste videoclipuri nu sunt responsive. Odată cu apariția temelor WordPress responsive, utilizatorii care vă vizitează site-ul pe ecrane mai mici vor vedea containere video care sunt întinse și disproporționate. În acest articol, vă vom arăta cum să faceți videoclipurile dvs. responsive în WordPress cu FitVids.
FitVids este un plugin jQuery care vă permite să faceți încorporările video responsive. Dacă doriți să îl utilizați pe site-ul dvs. WordPress, tot ce trebuie să faceți este să instalați și să activați pluginul FitVids pentru WordPress. După activare, trebuie să accesați Aspect » FitVids și să introduceți o clasă selector CSS. WordPress adaugă automat clasa .post articolelor, deci puteți folosi doar aceasta.
Atât, salvați modificările și previzualizați site-ul. Va trebui să redimensionați ecranul browserului pentru a vedea videoclipurile ajustându-se în consecință.
Tutorial video
Dacă nu îți place videoclipul sau ai nevoie de mai multe instrucțiuni, continuă să citești.
Adăugați manual FitVids pentru a face videoclipurile dvs. responsive în WordPress
Dacă nu doriți să instalați pluginul FitVids pentru WordPress, atunci puteți adăuga pluginul FitVids jQuery manual. Primul lucru pe care trebuie să-l faceți este să descărcați și să extrageți pluginul FitVids jQuery pe computerul dumneavoastră. Acum trebuie să încărcați folderul extras FitVids.js-master în directorul js al temei dumneavoastră.
Trebuie să vă conectați la site-ul dvs. web folosind un client FTP precum Filezilla și să deschideți directorul temei dvs. Este posibil ca tema dvs. WordPress să nu aibă un folder js. Dacă nu este acolo, atunci trebuie să creați unul și apoi să încărcați folderul FitVids.js-master de pe computerul dvs.
În folderul js, trebuie să creați un fișier nou și să-l numiți FitVids.js. Editați acest fișier și lipiți acest cod în el.
(function($) {
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".post").fitVids();
});
})(jQuery);
Codul de mai sus îi spune FitVids să caute clasa selectorului CSS .post. Acum că aveți FitVids gata, este timpul să adăugați corect javascripts în tema dvs. WordPress.
Pur și simplu, copiați și lipiți următorul cod în fișierul functions.php al temei dvs.:
wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);
wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);
Odată ce ați făcut acest lucru, ați terminat. Ați făcut cu succes videoclipurile dvs. WordPress responsive.
Sperăm că acest articol v-a fost util. Pentru feedback și întrebări, nu ezitați să lăsați un comentariu mai jos sau să ni vă alăturați pe Twitter și Google+.
Joe Bowls
Acest lucru nu se mai aplică. Pluginul a fost actualizat. Nu mai funcționează pentru mine.
Suport WPBeginner
We will be sure to take a look and consider alternatives when we next update this post
Admin
smithy
Nu perfect, dar cu Jetpack și WP „din cutie”, acest css va face ca încorporările de videoclipuri YouTube să se potrivească 100% lățimii de conținut în mod responsive – nefiind necesare pluginuri etc., deci foarte „compact”. „Padding-ul” păstrează raportul de aspect.
span.embed-youtube { position: relative; padding-bottom: 56.25%; padding-top: 18px; height: 0; overflow: hidden; }
span.embed-youtube iframe,
span.embed-youtube object,
span.embed-youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Dacă ajută pe cineva.
Flemming
Acest lucru funcționează perfect pentru mine (site WP auto-găzduit). Inițial am folosit un plugin numit Advanced Responsive Video Embedder, care este foarte bun, dar nu a funcționat bine cu pluginul OptimizePress.
Pluginul FitVids face exact ceea ce am nevoie, fără probleme (până acum!) – mulțumesc mult pentru scrierea acestui post, mi-a economisit o bătaie de cap!
Danny
Un post despre cum să încorporați videoclipuri responsive, dar videoclipul din post în sine nu este responsive… hmmm
Anthony baker
You should add that you cannot add plugins with free version of wordpress.com.
Anthony baker
OH, se pare că acest articol este pentru wordpress.org. Atât de confuz. Deci, dacă am versiunea premium de Wordpress.com, pot adăuga acest plugin?
Gabor
Celălalt lucru este că, în cazul în care setez .post-entry /acesta este pentru mine/
decât tot post-ul va fi responsive și widget-ul Amazon pe care îl adaug va fi și el. Ceea ce extinde întregul post… vreo soluție?
flashbytes
Există o modalitate de a evita multiple fișiere js noi? Nu ar fi posibil să adăugați acest js (ambele fișiere) la unul care este deja încărcat în mod implicit, astfel încât încărcarea paginii să nu sufere la fel de mult ca și cum ar fi trei fișiere în loc de unul?
Rob
Mulțumesc!!!! adăugând
.post, .page
în selectorul CSS a funcționat excelent pentru mine și pentru paginile pe care am videoclipuri... încă nu am adăugat o postare pe blog, dar sunt sigur că ar trebui să funcționeze bine și cu aceasta, deoarece a funcționat pentru mine pe paginile mele
MULȚUMESC!!!!
raffaella paolone
salut
Mulțumesc pentru acest articol
Ce părere aveți despre fitvids și videoclipuri în widget-uri?
selector?
Michael Boll
Mulțumesc pentru acest sfat excelent.
Cunoașteți un plugin care va permite vizionarea video pe un iPad?
Suntem o școală care folosește WOrdpress în draci (auto-găzduit), dar când încărcăm video pe site-urile noastre WordPress, acesta nu poate fi văzut pe un iPad.
Caut un plugin pentru a rezolva asta. Sugestii?
Putem vizualiza toate celelalte videoclipuri pe un iPad, doar nu pe cele găzduite pe propriul nostru server WordPress. Nu sunt sigur de ce nu se redă în HTML 5.
Mulțumesc,
Mike
Suport WPBeginner
Michael, Credem că utilizatorii ar trebui să nu încarce niciodată videoclipuri pe WordPress. Credem că încorporarea videoclipurilor dintr-o sursă precum YouTube sau Vimeo este o alternativă mai bună. Cu toate acestea, dacă trebuie să încarci un videoclip, atunci WordPress vine cu shortcode-ul video începând cu versiunea 3.6. Videoclipurile tale trebuie să fie în format compatibil iPad, cum ar fi mp4, m4v, ogv, mov etc. Poți folosi, de asemenea, un program precum WinFF pentru a-ți converti videoclipurile în format compatibil iPad.
Admin
Denis McCaul
Am cercetat de atunci și am constatat că adăugarea
.post, .page
în loc de doar .post înseamnă că acum funcționează pentru mine pe Postări și Pagini.
Orice soluții la incompatibilitatea cu pluginul „Lazy Load for Videos” sunt foarte apreciate.
Mulțumesc, Denis
Denis McCaul
Am instalat pluginul și am urmat instrucțiunile dvs. de configurare, vești bune și rele.
Vești bune, funcționează.
Vești rele
1. Nu este compatibil cu pluginul „Lazy Load for Videos”. A trebuit să-l dezactivez pe acesta pentru ca pluginul dvs. să funcționeze. Deci, pagina se încarcă acum mai greu, mai ales dacă sunt mai multe videoclipuri.
2. Am adăugat selectorul CSS .post, așa cum a fost recomandat în setări. Acest lucru îl face să funcționeze pe postările de blog, dar nu și pe videoclipurile încorporate pe pagini. Dacă schimbați .post în .page, acesta va funcționa pe pagini, dar nu și pe postări.
Există vreo modalitate de a rezolva aceste probleme?
Mulțumesc, Denis