Vaiguga Colorado Stone Coaster käsitööõpetus

Mul on mobiilseadmete jaoks optimeeritud tundliku teemaga veebisait.

Vaatamata sellele ei läbi paljud lehed Google'i „mobiilisõbralikkuse testi” (https://search.google.com/test/mobile-friendly)

Siin on Google'i tööriista valideerimiskatse tulemus:

(valideerimise ebaõnnestumise põhjused on: tekst on liiga väike; klõpsatavad elemendid on üksteisele liiga lähedal)

Sain teada, et kõik minu saidi lehed, mis ei saa seda testi läbida, sisaldavad manustatud YouTube'i videot.

Kui eemaldan video, läbivad kõik need lehed testi.

Video lisatakse järgmise koodiga:

 
<iframe width='853' height='480' src='https://www.youtube.com/embed/UbtGFrUpri4' frameborder='0' allowfullscreen></iframe>

CSS on:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Video skaala reageerib minu mobiilseadmes reageerivalt.

Minu küsimus on: kas on võimalik lasta oma lehel YouTube'i videot mobiilsõbralikult manustada?

Samuti oleksin uudishimulik, kas on normaalne, et Googlebot ei sõelu CSS-i ja JS-i ning näitab video asemel fragmenti "teie brauser ei toeta seda funktsiooni".

Ok, see oli keeruline, kuna Google'i ettepanekud on petlikud: Google räägib "klõpsatavatest elementidest üksteisele liiga lähedal" ja "väikesest tekstist", kuid ekraanipilti vaadates on probleem selles, et videokonteiner on liiga suur (hoolimata reageerivast ümbrisest) ).

Arvestades, et tööriistas "ekraanist suurem sisu" on veatüüp, pole mul aimugi, miks Google ei pannud seda juhtumit sellesse kategooriasse.

Igatahes unustage väike tekst, unustage asjaolu, et tegelik video laieneb reageerivalt mis tahes tegelikus mobiiltelefonis: Googlebot näeb suurt iframe'i ekraanilt väljas, märkides teie saidi mobiilisõbralikuks.

Ainus lahendus, mille leidsin, oli atribuudi laius ja kõrgus eemaldamine iframe'i HTML-koodist. Teisisõnu, peate muutma tavalist YouTube'i manustamiskoodi, mis näeb nüüd välja selline:

 <iframe src='http://www.youtube.com/embed/VIDEO_ID' frameborder='0' allowfullscreen> </iframe> 

See võimaldab mul läbida mobiilsõbralikkuse testi kõigil õigusrikkujatel.

Loodetavasti ei tekita atribuutide kõrgus ja laius eemaldamine tavaliste brauserite jaoks video tavapärase väljundi probleeme.

Andke mulle teada, kui teil on parem lahendus või arvate, et see võib probleeme tekitada.

  • 1 See ei tohiks probleeme tekitada. Iframe'i piirab endiselt konteiner, mis määrab selle suuruse. Kui see on see, mida võetakse selleks, et Google aktsepteeriks nende enda punast koodi, siis selleks on see vajalik.
  • Ideaalne lahendus. Kui keegi kasutab alglaadimisraamistikku, kasutage manustamiseks reageerivat klassi. Kohandatud kõrguse ja laiuse pärast getbootstrap.com/docs/4.0/utilities/embed ei pea muretsema

Ma ei oska aruande keelt lugeda, kuid oletan selle põhjal, mida saan koguda, et põhjus on selles, et YouTube'i vaikimisi manustamismeetod hõlmab iframe'i, mis on vaikimisi pikslite arv.

Kuigi see sobib arvuti brauseri käsitsemiseks, pole see mobiilseadmete jaoks parim tava. Manustada on võimalik reageerivalt, nii et video oleks skaleeritud ekraanile ja selle ümbritsevale sisule.

Kui olete rahul CSS-i või JS-i nõuete kirjutamisega, on CCS-Tricksil paar toimivat lahendust, mis peaksid teie probleemid lahendama.
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

See on nende ettepanek CSS-iga selle tegemiseks, et video sundida reageerivasse aknasse.

<iframe width='560' height='349' src='http://www.youtube.com/embed/VIDEO_ID?rel=0&hd=1' frameborder='0' allowfullscreen=''></iframe> ?> var13 ->

Selle CSS-i kasutamine konteineri kujundamiseks.

<?php .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Alternatiiv kasutab video dünaamilise suuruse muutmiseks jQuery-d.

// Find all YouTube videos var $allVideos = $('iframe[src^='//www.youtube.com']'), // The element that is fluid width $fluidEl = $('body'); // Figure out and save aspect ratio for each video $allVideos.each(function() { $(this) .data('aspectRatio', this.height / this.width) // and remove the hard coded width/height .removeAttr('height') .removeAttr('width'); }); // When the window is resized $(window).resize(function() { var newWidth = $fluidEl.width(); // Resize all videos according to their own aspect ratio $allVideos.each(function() { var $el = $(this); $el .width(newWidth) .height(newWidth * $el.data('aspectRatio')); }); // Kick off one resize to fix all videos on page load }).resize(); 

Teise võimalusena, kui te ei soovi nende rakendamist, siis teenus nagu EmbedResponsively saab teie eest kõik hakkama. Ma ei saa isiklikult kinnitada, kui vastupidav see lahendus on, kuna ma pole seda kasutanud, kuid see on esimene Google'i tulemus YouTube kinnistab reageerimisvõime.
https://embedresponsively.com/

  • aitäh, kahjuks olin juba sarnase lahenduse juurutanud ja video on mobiilis tõepoolest kenasti mastaabitav. Minu küsimust muudeti, kuna see sisaldas linki, kuid arvan, et see on kasulik, nii et siin on see uuesti: areammo.it/sparatutto/news/ ... Samuti olen redigeerinud algset küsimust üksikasjadega.

none: Charles Robertson | none

none