Ωραία λοιπόν, θέλουμε να βάλουμε στο site μας ένα iframe, ένα YouTube ή ένα Vimeo βίντεο, αλλά όταν πάμε να το δούμε σε mobile, δεν προσαρμόζεται σωστά στη συσκευή μας. Δυστυχώς, το να βάλουμε στο iframe style=”width:100%” δεν βοηθάει ακριβώς, γιατί κρατάει το ύψος σταθερό και δημιουργεί περίεργη εικόνα.
Η λύση είναι σχετικά απλή, και προκύπτει με λίγα μαθηματικά. Αρχικά, στον html κώδικά βάζουμε το iframe μας σε ένα div και του προσδίδουμε μια κλάση (στο παράδειγμά μας την .ttrp-frame).
<div class='ttrp-frame'> <iframe src="https://player.vimeo.com/video/128464942" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>
Έπειτα, στο css κάνουμε το div μας να κρατάει μια συγκεκριμένη αναλογία, χρησιμοποιώντας ποσοστά στο padding-bottom. Εάν θέλουμε το iframe να είναι 1:1, στο padding-bottom θα βάλουμε 100%, εάν είναι 16:9 τότε υπολογίζουμε το αποτέλεσμα της διαίρεσης 9/16, σε ποσοστό δηλαδή 0,5625 ή 56,25%. Τέλος εάν η αναλογία μας είναι 4:3, υπολογίζουμε το πηλίκο της διαίρεσης 3/4=0,6525 άρα το ποσοστό που ψάχνουμε είναι 65,25%.
.ttrp-frame { position: relative; padding-bottom: 56.25%; /* 65.25% for 4:3 */ padding-top: 30px; height: 0; overflow: auto; -webkit-overflow-scrolling:touch; }
Συνεχίζουμε κάνοντας το iframe να καταλαμβάνει το ίδιο πλάτος και ύψος με το div μας, όπως φαίνεται στον παρακάτω κώδικα.
.ttrp-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Με τον τρόπο αυτό, επιτυγχάνουμε να φτιάξουμε ένα fluid πλαίσιο που προσαρμόζεται σε οποιαδήποτε οθόνη, είτε αυτή είναι του desktop μας είτε του κινητού μας.
Πατήστε το κουμπί παρακάτω να δείτε live το αποτέλεσμα στο jsfiddle. Enjoy!