Responsive... ερώτημα

[Dimitris Kanatas]

Γεια σας,

Χρόνια πολλά παιδιά!

Η χρησιμοποίηση Responsive Template απαιτεί και προσαρμογή στα πρόσθετα... Θέλω να βάλω ένα βίντεο από υπηρεσία sch.gr και να ρέει στις αναλύσεις. Χρησιμοποίησα αυτή τη δομή και φαίνεται πως δουλεύει. Θέλω μια επιβεβαίωση για σωστή σύνταξη του κώδικα και γενικά μια κατεύθυνση για Responsive... πρόσθετα.

Code: [Select]

<div style="position: relative; width: 100%; height: 0px; padding-bottom: 60%; text-align:

center;"><iframe align="middle" allowfullscreen="" frameborder="0" mozallowfullscreen=""

scrolling="no" src="υπηρεσία βίντεο" style="position:

absolute; left: 0px; top: 0px; width: 100%; height: 100%"

webkitallowfullscreen=""></iframe></div>

[nikos]

Ποια η πηγή του video;

Χρόνια πολλά

[Dimitris Kanatas]

Νίκο από το vod του sch.gr

[nikos]

Αν και σου έχω την απάντηση επειδή είδα ότι το αντλείς με iframe, θα ήθελα και την URL για να το δοκιμάσω και να έχεις την επαλήθευση που ζητάς.

[nikos]

Λοιπόν βρήκα και το vod και τις URL αν και έπρεπε εξ αρχής να δώσεις τις πληροφορίες αυτές.

Λοιπόν στο css του template σου βάλε την κάτωθι κλάσση.

Code: [Select]


/* media class for video through iframe */
@media screen and (max-width: 980px) {
  .mediaWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.mediaWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}


Κατόπιν πας στο άρθρο που θέλεις να δείξεις το video παράδειγμα αυτό και γράφεις μέσα στην html αυτό

<div class="mediaWrapper"><iframe allowfullscreen="" frameborder="0" height="380" mozallowfullscreen="" scrolling="no" src="http://vod-new.sch.gr/asset/player/NMdPLdRlbeUsZN5ZVFF7dZde/L1WgORVHbLGSaQXSXPCKw5x5" webkitallowfullscreen="" width="660"></iframe></div>

και είσαι responsive.

[Dimitris Kanatas]

Σ` ευχαριστώ Νίκο. Το είχα δοκιμάσει όταν έκανα έρευνα και δούλεψε αντί με width="660" στο iframe width="100%". Τώρα έτσι το έκανα όπως το έγραψες γιατί μάλλον είναι κι ο πιο σωστός τρόπος, κρατώντας στο iframe width="100%" .

Με το πιο πάνω κώδικα (αρχικό) καταφέρνει όμως κάτι επιπλέον, ή έτσι το καταλαβαίνω εγώ από τις δοκιμές. Να "γεμίζει" το χώρο ακόμα και στη περίπτωση που το πλάτος του χώρου ξεπερνάει την τιμή 660px

Στον κώδικα που έγραψες πώς κεντράρεις το βίντεο (στην α περίπτωση της εικόνας);

Α! Νίκο έγραψα γενικά γιατί φαντάζομαι πως ο κώδικας ισχύει και για άλλες περιπτώσεις σε iframe.

[nikos]

Να σαι καλά Δημήτρη.

Εγώ εισήγαγα την url source που είχε το παράδειγμα του σχολικού site με τις συγκεκριμένες διαστάσεις, που εφαρμόζεται σε μεγάλα πλάτη media screen, αλλά σε μικρότερα καταλαμβάνει το πλήρες πλάτος της εκάστοτε οθόνης του media που επισκέπτεται το άρθρο. Αν θέλεις και σε μεγάλα πλάτη να είναι το ίδιο, τότε στο πλάτος θέτεις τιμή 100%.

Όσον αφορά την css κλάσση που σου παρέθεσα, ναι ισχύει όπως έχω δοκιμάσει και εφαρμόσει με διάφορες πηγές άντλησης μέσω iframe πολυμεσικού περιεχομένου, όπως youtube, vimeo, flickr κ.α. για αυτό και αν δεις έχω κάνει πρόσφατα update σε ορισμένες σχετικές δημοσιευμένες επεκτάσεις μου στο EDC, και έπονται και άλλες, προκειμένου όλες να είναι responsive.

[perseas]

Χρησιμοποίησα και εγώ με επιτυχία τον παραπάνω κώδικα που προτάθηκε και ανταποκρίνεται πολύ σωστά.

Το ερώτημά μου είναι το εξής.

Θα μπορούσε ο ίδιος κώδικας να χρησιμοποιηθεί και σε μια μελλοντική αναβάθμιση του plugin gviewer ?
Σκοπός είναι τα εμφανιζόμενα έγγραφα να αυξομειώνουν τις διαστάσεις τους ανάλογα με την χρήση στις συσκευές όπως smartphones ή ταμπλέτες.

Ως γνωστό το plugin gviewer λαμβάνει ως παραμέτρους σταθερές διαστάσεις σε px.

Ευχαριστώ εκ των προτέρων

[nikos]

Πού τον χρησιμοποίησες και γιατί ακριβώς, από τα γραφόμενά σου, δεν με διαφωτίζει. Εγώ παρέθεσα μια custom λύση στο συγκεκριμένο ερώτημα που εφαρμόζεται στο template.

Όσον αφορά το plugin gviewer, αν εννοείς το Google Docs Viewer, γιατί έτσι όπως το αναφέρεις δεν υπάρχει τέτοιο plugin, θα πρέπει να ρωτήσεις τον δημιουργό του, δεδομένου ότι το κάθε plugin φέρει το δικό του css και html.

[webgift]

Καλώς εχόντων των πραγμάτων το πρόσθετο Google Docs Viewer θα αναβαθμιστεί εντός της
εβδομάδας.

[perseas]

@webgift Very good news. Thank you..