Regram, Repin, Retweet + Responsive βίντεο YouTube με CSS

Regram, rib, retreat, σημαντικά ονόματα για τους διαχειριστές των μέσων κοινωνικής δικτύωσης. Αλλά τι κάνει αυτούς τους όρους τόσο ιδιαίτερους; Η παραγωγή περιεχομένου είναι εξαιρετικά χρονοβόρα! Λιγότερο για το Instagram απ’ ό,τι για το YouTube, αλλά και πάλι, το περιεχόμενο είναι απαραίτητο σχεδόν καθημερινά στα κοινωνικά δίκτυα. Είναι δύσκολο να δείχνετε δημιουργικότητα κάθε μέρα. Αυτό δεν αφορά μόνο τη δημιουργικότητα καθαυτή, φυσικά υπάρχουν και ημέρες διακοπών, αργίες ή ακόμη και Σαββατοκύριακα. Ίσως έχετε τον δικό σας διαχειριστή κοινωνικών μέσων στην εταιρεία, ξαφνικά υπάρχει αλλαγή προσωπικού ή μειωμένο ωράριο εργασίας, ποιος φροντίζει για την εμφάνιση; Η παραγωγή περιεχομένου είναι τόσο χρονοβόρα που πολλοί καταφεύγουν στη δημοσίευση από άλλους. Γιατί να το γράψετε μόνοι σας όταν κάποιος έχει ήδη γράψει ένα καλό tweet; Γιατί να βγάλετε μια φωτογραφία μόνοι σας όταν υπάρχουν ήδη πολλές καλές φωτογραφίες στο Pinterest; Γιατί να γυρίσετε ένα νέο αστείο βιντεάκι όταν υπάρχουν ήδη εκατομμύρια στο Instagram;

Μοιραστείτε και ενσωματώστε για επαγγελματικούς (και ιδιωτικούς) σκοπούς

Συμβουλή για όλους τους webmasters! Στο τέλος του άρθρου, θα μάθετε πώς να κάνετε τα βίντεο του YouTube να ανταποκρίνονται στις διάφορες συσκευές διαχωρίζοντας τις κλάσεις CSS. Αυτό σημαίνει ότι τα βίντεο του YouTube προσαρμόζονται στο μέγεθος της οθόνης των διαφόρων τελικών συσκευών μεταξύ υπολογιστή, φορητού υπολογιστή, tablet και smartphone. Και αυτό γίνεται εντελώς αυτόματα.

Regram, ripping και retreat, ωστόσο, όλα αυτά δεν έχουν μόνο να κάνουν με την παραγωγή περιεχομένου. Διότι, φυσικά, οι ιδιώτες χρησιμοποιούν επίσης τον διαμοιρασμό άλλου περιεχομένου. Αστεία βίντεο, ενημερωτικά, αστεία, μιμίδια ή απλά βίντεο με χαριτωμένα ζώα. Το διαδίκτυο και ιδιαίτερα τα κοινωνικά δίκτυα είναι γεμάτα από δημιουργικές φωτογραφίες και βίντεο. Όταν το περιεχόμενο προκαλεί συναισθήματα, οι άνθρωποι θέλουν να το κρατήσουν για τον εαυτό τους. Αυτός είναι ο λόγος για τον οποίο μοιράζεται πολύ περιεχόμενο στο χρονολόγιο κάποιου, για τον εαυτό του αλλά και για τους φίλους του. Εξάλλου, μπορείτε πάντα να δείχνετε πόσο συνειδητοποιημένοι είστε ως προς την τάση. Η συνειδητοποίηση των τάσεων καθώς και το “βλέπω και βλέπω”, αυτό είναι το ζητούμενο στα κοινωνικά δίκτυα.

Επιτρέπεται η κοινοποίηση ξένου περιεχομένου;

Όποιος εγγράφεται σε μια πλατφόρμα κοινωνικής δικτύωσης συνάπτει τους γενικούς όρους και προϋποθέσεις της πλατφόρμας. Αυτές ορίζουν ήδη ότι το περιεχόμενο μπορεί να διαμοιράζεται ελεύθερα εντός του κοινωνικού δικτύου. Ως εκ τούτου, τα μέσα ενημέρωσης, εφόσον δεν εγκαταλείπουν την πλατφόρμα, μπορούν να κοινοποιούνται από τους χρήστες με ορισμένους, προκαθορισμένους τρόπους. Ανάλογα με το κοινωνικό δίκτυο, η μορφή της άδειας διαφέρει. Αυτό οφείλεται στο γεγονός ότι ο διαμοιρασμός περιεχομένου δεν είναι ο ίδιος σε κάθε δίκτυο. Ορισμένα δίκτυα ενθαρρύνουν την κοινοποίηση περιεχομένου από άλλους. Άλλα δίκτυα, από την άλλη πλευρά, προσπαθούν να καταστήσουν πιο δύσκολη την κοινοποίηση περιεχομένου. Ας ρίξουμε μια σύντομη ματιά στα κοινωνικά δίκτυα λεπτομερώς και στο πόσο εύκολο ή σύνθετο περιεχόμενο μπορεί να διαμοιραστεί.

Δημοσιεύσεις, σύνδεσμοι, φωτογραφίες και βίντεο Μοιραστείτε στο Facebook

Μετά το Twitter, το Facebook είναι μακράν το πιο ανοιχτό δίκτυο για την ανταλλαγή περιεχομένου. Δεν έχει σημασία αν πρόκειται για συνδέσμους προς το δικό σας ιστολόγιο, το ηλεκτρονικό σας κατάστημα ή άλλα μέσα, όπως περιοδικά, φωτογραφίες του εαυτού σας, των φίλων σας ή ιστοσελίδες εταιρειών, καθώς και βίντεο και όλες τις αναρτήσεις. Κατά συνέπεια, το Facebook είναι η καλύτερη πλατφόρμα για τη διανομή περιεχομένου πολυμέσων. Ενώ άλλες πλατφόρμες όπως το Instagram, το Snapchat ή το Tiktok, οι οποίες έχουν σχετικά πολλούς περιορισμούς, δεν επιτρέπουν την άμεση σύνδεση, μπορείτε να ξεσπάσετε πλήρως στο Facebook ως διαχειριστής κοινωνικών μέσων.

Μέσα στο Facebook, μπορείτε όχι μόνο να επαναχρησιμοποιήσετε οποιαδήποτε μορφή μέσων, αλλά φυσικά μπορείτε επίσης να χρησιμοποιήσετε τα μέσα τρίτων και να τα ανακυκλώσετε αναλόγως. Στο σημείο αυτό, ωστόσο, θα πρέπει πάντα να ελέγχετε την τρέχουσα νομική κατάσταση και, φυσικά, τους ισχύοντες όρους και προϋποθέσεις. Επειδή, παρά το γεγονός ότι είναι ενημερωμένοι, οι όροι χρήσης αλλάζουν συνεχώς, ακόμη και αν πρόκειται για λεπτομέρειες. Για παράδειγμα, στο άρθρο μας σχετικά με τις ρυθμίσεις απορρήτου στο Facebook με την πάροδο του χρόνου, από το σκάνδαλο των δεδομένων του Cambridge Analytics μέχρι το σημερινό Facebook Privacy 2.0.

Κατ’ αρχήν, ωστόσο, είναι κανείς αρκετά ανεξάρτητος εντός του κοινωνικού δικτύου όσον αφορά τη χρήση και την επαναχρησιμοποίηση ξένων μέσων ενημέρωσης, αρκεί να βρίσκεται εντός των ορίων των όρων χρήσης αλλά και των νόμων των εθνικών χωρών.

Το πλεονέκτημα του Facebook είναι ότι οι ομάδες-στόχοι είναι πολύ ευρείες. Από τον 20χρονο μέχρι την 40χρονη γυναίκα, τον 50χρονο άνδρα και ναι, ακόμη και τον 60χρονο συνταξιούχο. Επομένως, στο Facebook μπορείτε να προσεγγίσετε ανθρώπους με μεγάλη ακρίβεια μέσω της λεγόμενης στόχευσης και επαναστόχευσης.

Το μειονέκτημα είναι ότι το Facebook είναι ήδη το μεγαλύτερο κοινωνικό δίκτυο στον κόσμο, οπότε οι θέσεις κατάταξης είναι ιδιαίτερα περιζήτητες. Καθημερινά ανεβαίνουν δισεκατομμύρια φωτογραφίες, γράφονται δισεκατομμύρια αναρτήσεις. Ποιος αποκτά παρουσία και είναι άμεσα ορατός στην εφαρμογή του Facebook και ποιος δεν εμφανίζεται στην ροή ειδήσεων της εφαρμογής; Αυτό ακριβώς είναι το σημείο από το οποίο το Facebook κερδίζει τα χρήματά του και επομένως, εάν οι εταιρείες θέλουν να επιτύχουν μεγάλη εμβέλεια, δεν πρέπει να βασίζονται στην οργανική εμβέλεια αλλά στην πληρωμένη εμβέλεια. Φυσικά, θα βρείτε επίσης πολλές συμβουλές σχετικά με αυτό στο ιστολόγιό μας για τα μέσα κοινωνικής δικτύωσης!

Πώς μπορώ να μοιραστώ περιεχόμενο του Facebook στον ιστότοπό μου; Αν θέλετε να ενσωματώσετε φωτογραφίες, βίντεο ή αναρτήσεις από το Facebook στον δικό σας ιστότοπο, πρέπει να ενσωματώσετε κώδικα HTML. Αυτό είναι πολύ απλό

  • Ανοίξτε το https://facebook.com
  • Επιλέξτε ανάρτηση, φωτογραφία ή βίντεο
  • Τώρα επιλέξτε την επιλογή “Embed post”
  • Τώρα βλέπετε τον κώδικα HTML, το iframe
  • Αντιγράψτε τον κώδικα HTML
  • Εισαγωγή κώδικα HTML στην ιστοσελίδα

Δημοσιεύσεις, σύνδεσμοι, φωτογραφίες και βίντεο Μοιραστείτε το στο Twitter

Όπως αναφέρθηκε παραπάνω, το Twitter είναι το πιο ανοιχτό δίκτυο για την ανταλλαγή περιεχομένου, μετά το Facebook. Μια μεγάλη ποικιλία περιεχομένου πολυμέσων μπορεί επίσης να διαμοιραστεί εδώ. Στην αρχή, το Twitter περιοριζόταν σχετικά σε σύντομα μηνύματα με μέγιστο μήκος 140 χαρακτήρων. Σήμερα, πολλά πράγματα έχουν αλλάξει, τα tweets μπορούν να είναι πολύ μεγαλύτερα, το περιεχόμενο των μέσων ενημέρωσης δεν περιορίζεται πλέον σε κείμενο, αλλά μπορούν επίσης να ανεβαίνουν φωτογραφίες, βίντεο, αλλά ακόμη καλύτερα, μπορούν επίσης να μοιράζονται συνδέσμους προς άρθρα ή προϊόντα στο ηλεκτρονικό κατάστημα.

Το μειονέκτημα του Twitter είναι ότι εδώ δεν επιτυγχάνετε μεγάλη εμβέλεια, και μάλιστα μόνο για πολύ συγκεκριμένα θέματα. Επομένως, αν θέλετε να έχετε μεγαλύτερη εμβέλεια, θα πρέπει να επικεντρωθείτε στα άλλα δίκτυα. Ειδικά το Facebook, το Instagram και το YouTube.

Πώς μοιράζεστε tweets στο Twitter;

  • Ανοίξτε το https://twitter.com
  • Συνδεθείτε
  • Επιλέξτε ένα tweet της επιλογής σας
  • Πατήστε το δεύτερο εικονίδιο, κάτω αριστερά, Retweet
  • Προαιρετικά, μπορείτε τώρα να προσθέσετε τη δική σας περιγραφή
  • Στείλτε το tweet

Πώς μπορώ να ενσωματώσω ένα tweet στο WordPress ή σε έναν άλλο ιστότοπο;

Κατ’ αρχήν, υπάρχουν δύο τρόποι για την ενσωμάτωση tweets σε ιστότοπους. Από προεπιλογή, τα tweets ενσωματώνονται χρησιμοποιώντας κώδικα HTML, ένα λεγόμενο iframe. Ειδικά για τους χρήστες του WordPress, ωστόσο, υπάρχει επίσης η δυνατότητα εισαγωγής συνδέσμων απευθείας στη δημοσίευση. Στη συνέχεια, το σύστημα διαχείρισης περιεχομένου μετατρέπει αυτόματα τον σύνδεσμο σε ενσωμάτωση στο Twitter.

Ενσωμάτωση του Twitter σε ιστότοπους

  • Προχωρήστε όπως παραπάνω: Ανοίξτε το Twitter, συνδεθείτε, επιλέξτε tweet
  • Πατήστε το βέλος πάνω δεξιά
  • Επιλέξτε “Ενσωμάτωση Tweet
  • Τώρα βλέπετε τον κώδικα HTML, το iframe
  • Αντιγράψτε τον κώδικα HTML
  • Εισαγωγή κώδικα HTML στην ιστοσελίδα

Ενσωμάτωση του Twitter στο WordPress

  • Προχωρήστε όπως παραπάνω: Ανοίξτε το Twitter, συνδεθείτε, επιλέξτε tweet
  • Πατήστε το βέλος πάνω δεξιά
  • Επιλέξτε “Αντιγραφή συνδέσμου
  • Εισαγωγή συνδέσμου στη σελίδα του WordPress
  • Το σύστημα μετατρέπει αυτόματα τον σύνδεσμο για ενσωμάτωση (Συμβουλή! Αυτό λειτουργεί επίσης με βίντεο στο YouTube)

Παράδειγμα:

Μοιραστείτε φωτογραφίες και βίντεο στο Instagram

Το Instagram είναι λιγότερο ανοιχτό από τους δύο προαναφερθέντες υποψήφιους όσον αφορά τον διαμοιρασμό περιεχομένου. Δεν υπάρχει τρόπος να μοιραστείτε περιεχόμενο απευθείας στο Instagram.

Συμβουλή. Χρησιμοποιήστε μια εφαρμογή αναδημοσίευσης. Μπορείτε να βρείτε τέτοιες εφαρμογές επαναδημοσίευσης δωρεάν στο PlayStore της Google αλλά και στο iStore της Apple. Με αυτές τις εφαρμογές μπορείτε εύκολα να αντιγράψετε τους συνδέσμους των επιμέρους περιεχομένων πολυμέσων, να τους επικολλήσετε (στην εφαρμογή) και να μοιραστείτε τη φωτογραφία ή το βίντεο στο δικό σας κανάλι.

Μπορείτε να ενσωματώσετε το Instagram στον δικό σας ιστότοπο;

Ακριβώς όπως και στα άλλα δίκτυα, απλά πάρτε την ανάρτηση της επιλογής σας και, στη συνέχεια, πατήστε το μικρό βέλος στην επάνω δεξιά γωνία και επιλέξτε ενσωμάτωση. Το Instagram θα σας εμφανίσει αμέσως τον κατάλληλο κώδικα HTML για τον ιστότοπό σας. Συμβουλή! Στο WordPress, αρκεί να εισαγάγετε τον σύνδεσμο προς τη δημοσίευση. Αυτό σημαίνει ότι δεν χρειάζεται να πάτε στις ρυθμίσεις για να λάβετε τον κωδικό, αρκεί να κάνετε κλικ στη δημοσίευση και στη συνέχεια να αντιγράψετε τη διεύθυνση URL της σελίδας και να την επικολλήσετε στη δημοσίευση του WordPress σας.

Μοιραστείτε φωτογραφίες στο Pinterest

Το Pinterest είναι μια εξαιρετική πηγή για τη δημιουργία συνδέσμων στη βελτιστοποίηση μηχανών αναζήτησης. Ταυτόχρονα, το Pinterest είναι πολύ ανοιχτό για τον διαμοιρασμό περιεχομένου μέσων ενημέρωσης. Κάθε χρήστης έχει τη δυνατότητα να δημιουργεί διαφορετικές γκαλερί, τα λεγόμενα pinboards. Σε κάθε μεμονωμένο πίνακα καρφιτσών μπορείτε να ανεβάσετε ή να μοιραστείτε διαφορετικές φωτογραφίες, και κάθε μεμονωμένη ανάρτηση ονομάζεται καρφίτσα. Ακριβώς όπως μια ανάρτηση στο Twitter ονομάζεται tweet. Έτσι, το κανάλι των χρηστών στα μέσα κοινωνικής δικτύωσης αποτελείται από διάφορες γκαλερί, τα λεγόμενα pinboards. Οι χρήστες μπορούν να έχουν ελεύθερη πρόσβαση στο περιεχόμενο του άλλου. Με αυτόν τον τρόπο, μπορούν επίσης να δημιουργήσουν πλήρεις πίνακες καρφιτσών χωρίς να έχουν τραβήξει οι ίδιοι μια φωτογραφία. Επομένως, το περιεχόμενο των μέσων ενημέρωσης είναι επίσης πολύτιμο εδώ μέσω της σύγκρισης. Αν εστιάζετε σε ένα θέμα και ειδικεύεστε, για παράδειγμα στη ρύθμιση αυτοκινήτων, μπορείτε να δημιουργήσετε πολύ ειδικούς πίνακες εδώ. Για τις επιμέρους μάρκες αυτοκινήτων, όπως Mercedes, BMW, Renault, VW και πολλές άλλες. Πηγαίνει ακόμα πιο βαθιά, τι θα λέγατε για μεμονωμένους πίνακες καρφιτσών για τα διάφορα μέρη του αυτοκινήτου σε σχέση με μια μάρκα αυτοκινήτου. Για παράδειγμα, μπορείτε να δημιουργήσετε εσωτερικούς χώρους Mercedes, ήχο Mercedes, ζάντες Mercedes και ούτω καθεξής.

Όσο περισσότερους πίνακες έχετε δημιουργήσει και όσο μικρότερο ανταγωνισμό έχετε, τόσο πιο γρήγορα μπορείτε να αυξήσετε την εμβέλειά σας στο Pinterest και να χρησιμοποιήσετε την κίνηση στη συνέχεια για να συνδέσετε κάποια προϊόντα με το δικό σας ηλεκτρονικό κατάστημα, αυτά που έχετε σε απόθεμα. Τώρα έχετε μια δωρεάν πηγή συνδέσμων, συγχαρητήρια!

Είναι δυνατή η ενσωμάτωση του Pinterest στον ιστότοπο;

Ναι, φυσικά! Ακριβώς όπως στο Facebook και στο Pinterest, αλλά και στο Instagram, το μόνο που έχετε να κάνετε είναι να επιλέξετε μια συγκεκριμένη ανάρτηση και να αναζητήσετε την επιλογή κοινοποίησης ή ενσωμάτωσης στις ρυθμίσεις. Εκεί θα βρείτε σίγουρα τον κώδικα HTML για το iframe. Το μόνο που έχετε να κάνετε είναι να το αντιγράψετε και να το επικολλήσετε στον ιστότοπό σας.

Μοιραστείτε βίντεο στο YouTube

Τελευταίο αλλά όχι λιγότερο σημαντικό, το YouTube. Τα βίντεο του YouTube είναι ιδανικά για ενσωμάτωση αλλά και για κοινή χρήση.

Εάν θέλετε να μοιραστείτε βίντεο YouTube στο δικό σας κανάλι YouTube, πρέπει να δημιουργήσετε λίστες αναπαραγωγής. Μέσα σε αυτή τη λίστα αναπαραγωγής, μπορείτε να αποθηκεύσετε διαφορετικά βίντεο, ώστε η λίστα αναπαραγωγής να εξυπηρετεί έναν συγκεκριμένο σκοπό. Για παράδειγμα, μπορείτε να καταρτίσετε λίστες αναπαραγωγής από τα τραγούδια του τρέχοντος chart ή λίστες αναπαραγωγής για διαφορετικά θέματα, όπως επεξηγηματικά βίντεο για το iPhone ή επεξηγηματικά βίντεο για το θέμα της επισκευής ποδηλάτων, αν το ηλεκτρονικό σας κατάστημα ασχολείται με το θέμα των ποδηλάτων και των αξεσουάρ ποδηλάτων.

Ωστόσο, τα βίντεο στο YouTube αποδίδουν επίσης όσον αφορά τη βελτιστοποίηση των μηχανών αναζήτησης. Με την ενσωμάτωσή τους στον δικό σας ιστότοπο, στο ιστολόγιο ή στο ηλεκτρονικό σας κατάστημα, οι χρήστες παραμένουν περισσότερο στον ιστότοπο. Ο χρόνος παραμονής ενός ιστότοπου είναι ένας πολύ σημαντικός δείκτης για την αξιολόγηση από την Google αλλά και από άλλες μηχανές αναζήτησης. Εν ολίγοις, οι μηχανές αναζήτησης ενδιαφέρονται να εμφανίζουν στους χρήστες το καλύτερο δυνατό περιεχόμενο. Το καλύτερο δυνατό ορίζεται από μεγάλο χρόνο παραμονής και συχνή αλληλεπίδραση, καθώς και από επισκέψεις σε επόμενες σελίδες. Όσο πιο ενεργοί είναι οι χρήστες που έχουν κάνει κλικ σε ένα αποτέλεσμα αναζήτησης, τόσο υψηλότερη είναι η βαθμολογία της σελίδας. Φυσικά, πάντα σε σύγκριση με τον ανταγωνισμό.

Αν παραμείνουμε στο θέμα των ποδηλάτων και των αξεσουάρ ποδηλάτων, θα μπορούσατε, για παράδειγμα, να περιγράψετε λεπτομερέστερα διάφορα βίντεο-σεμινάρια στο δικό σας ιστολόγιο με θέμα τα ποδήλατα, την ποδηλασία και τα αξεσουάρ ποδηλάτων. Αλλά μπορούν επίσης να ενσωματώσουν βίντεο σε υπάρχοντα άρθρα.

Ποιο είναι το πλεονέκτημα;

Ας πούμε ότι έχετε ένα άρθρο 800 λέξεων. Ο μέσος χρόνος ανάγνωσης είναι 1,12 λεπτά. Ενσωματώνοντας ένα βίντεο στο YouTube, για παράδειγμα με θέμα την επισκευή σωλήνα ποδηλάτου, συνολικής διάρκειας 10 λεπτών, μπορείτε να ενθαρρύνετε τους επισκέπτες να παρακολουθήσουν ολόκληρο το βίντεο, να επισκευάσουν ταυτόχρονα το ποδήλατο και έτσι όχι μόνο να παραμείνουν στη σελίδα σας για 1,12 λεπτά, αλλά και να αυξήσουν τον μέσο χρόνο παραμονής στη σελίδα σας σε 3,5 ή και 4 λεπτά. Αυτό επιτυγχάνεται με την ενσωμάτωση ενός βίντεο στο YouTube που δημιουργήθηκε από ένα τρίτο πρόσωπο. Υπέροχο περιεχόμενο!

Πώς μπορείτε να ενσωματώσετε βίντεο από το YouTube στο δικό σας ιστολόγιο;

Για το YouTube, υπάρχουν δύο τρόποι ενσωμάτωσης, και πάλι ο τυπικός ιστότοπος και ειδικά για το WordPress, η μετατροπή των άμεσων συνδέσμων από το σύστημα διαχείρισης περιεχομένου.

Ενσωμάτωση του YouTube σε ιστότοπους

  • Ανοίξτε το YouTube, επιλέξτε βίντεο
  • Επιλέξτε “Ενσωμάτωση βίντεο
  • Τώρα βλέπετε τον κώδικα HTML, το iframe
  • Αντιγράψτε τον κώδικα HTML
  • Εισαγωγή κώδικα HTML στην ιστοσελίδα

Ενσωμάτωση του YouTube στο WordPress

  • Ακολουθήστε τα παραπάνω βήματα: Ανοίξτε το YouTube, επιλέξτε βίντεο
  • Αντιγράψτε τη διεύθυνση URL της σελίδας
  • Εισαγωγή URL στη σελίδα του WordPress
  • Το σύστημα μετατρέπει αυτόματα τη διεύθυνση URL για την ενσωμάτωση

Εδώ είναι ένα άλλο ασυναγώνιστο πλεονέκτημα του WordPress: Το WordPress μετατρέπει τον αντίστοιχο σύνδεσμο βίντεο σε όλα τα μεγέθη με responsive τρόπο ώστε να ταιριάζει στην τελική συσκευή. Η τυπική ενσωμάτωση βίντεο στο YouTube, από την άλλη πλευρά, έχει μέγεθος 516 x 350 pixels. Για τις τελικές συσκευές με υψηλότερη ανάλυση εικόνας, το βίντεο εμφανίζεται γρήγορα καθαρό. Κατά συνέπεια, θα πρέπει να σκεφτείτε να προσαρμόσετε το μέγεθος του βίντεο στις αντίστοιχες τελικές συσκευές μέσω προσαρμογών CSS.

Συμβουλή και παρέκκλιση! Responsive βίντεο YouTube μέσω CSS

Αν θέλετε να αλλάξετε τις μορφές του YouTube χρησιμοποιώντας CSS, μπορείτε να αναθέσετε μεμονωμένες κλάσεις στα μεμονωμένα iframes. Αυτό σας επιτρέπει να καθορίσετε ότι υπάρχει μια κλάση για smartphones, μια για tablets και μια για φορητούς υπολογιστές και υπολογιστές. Ανάλογα με το μέγεθος της οθόνης της αντίστοιχης τελικής συσκευής του χρήστη, το μέγεθος της ενσωμάτωσης του βίντεο YouTube προσαρμόζεται στην οθόνη ή στην ανάλυση της οθόνης.

Για να διατηρήσουμε το παράδειγμα απλό, διαχωρίζουμε τις σταθερές συσκευές, όπως τα notebooks και οι υπολογιστές, από τις κινητές συσκευές, όπως τα tablets και τα smartphones. Ορίζουμε το σημείο διακοπής, δηλαδή τον αριθμό των εικονοστοιχείων της οθόνης στον οποίο αλλάζουν οι κλάσεις CSS, ως 980 εικονοστοιχεία και για τα δύο. Πρώτον, δημιουργούνται δύο νέες κλάσεις στο αρχείο CSS.

Παράδειγμα διαχωρισμού κλάσεων CSS:

@media only screen and (max-width : 901px) {
#no-youtube-video {
display: none,
}
}

Μετά την προσαρμογή του αρχείου CSS, ο κώδικας για την ενσωμάτωση του βίντεο YouTube πρέπει να επεκταθεί από την τάξη. Αυτός είναι ο τυπικός κώδικας του YouTube για την ενσωμάτωση:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/b_VdyV_dNB4″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Η προσαρμογή δίνει στον κώδικα την κλάση και μετά μοιάζει έτσι:

<iframe class=”no-youtube-video” width=”560″ height=”315″ src=”https://www.youtube.com/embed/b_VdyV_dNB4″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>