Πως να στρογγυλέψετε τις γωνίες στα βίντεο Blogger

Για να στρογγυλέψετε τις γωνίες ενός βίντεο σε μια ανάρτηση στο Blogger, ο πιο αποτελεσματικός τρόπος είναι η χρήση της ιδιότητας CSS border-radius. 

Επειδή τα ενσωματωμένα βίντεο (όπως από το YouTube) συχνά "ξεφεύγουν" από τις γωνίες, η καλύτερη πρακτική είναι να τοποθετήσετε το βίντεο μέσα σε ένα "κοντέινερ" (div) που θα περιορίζει το περιεχόμενο. 

Βήματα για τη στρογγυλοποίηση:

Ανοίξτε την ανάρτησή σας στο Blogger και γυρίστε την προβολή σε Προβολή HTML (το εικονίδιο με το μολυβί πάνω αριστερά).

Εντοπίστε τον κώδικα του βίντεο (συνήθως ξεκινά με <iframe... ή <video...).

Περιβάλλετε τον κώδικα με ένα div που περιέχει το στυλ για τις στρογγυλές γωνίες. Χρησιμοποιήστε το παρακάτω πρότυπο:

html;

<div style="border-radius: 20px; overflow: hidden; display: inline-block;">

  <!-- Εδώ επικολλάτε τον κώδικα του βίντεο (iframe) -->

  <iframe src="..." width="560" height="315" frameborder="0"></iframe>

</div>

Βασικές ιδιότητες που χρησιμοποιούνται:

border-radius: Καθορίζει πόσο στρογγυλεμένες θα είναι οι γωνίες (π.χ. 15px ή 20px). Όσο μεγαλύτερος ο αριθμός, τόσο πιο έντονη η καμπύλη.

overflow: hidden: Αυτή είναι η πιο κρίσιμη ρύθμιση. "Κόβει" τις αιχμηρές γωνίες του βίντεο ώστε να μην προεξέχουν από το στρογγυλεμένο πλαίσιο.

display: inline-block: Εξασφαλίζει ότι το πλαίσιο θα έχει το ίδιο μέγεθος με το βίντεο και δεν θα πιάνει όλο το πλάτος της σελίδας. 

Εναλλακτική λύση (για όλα τα βίντεο του blog):

Αν θέλετε όλα τα βίντεο στο blog σας να έχουν αυτόματα στρογγυλές γωνίες, μπορείτε να προσθέσετε τον εξής κώδικα στο μενού Θέμα > Προσαρμογή > Προηγμένα > Προσθήκη CSS:

CSS

iframe, video {

  border-radius: 15px !important;

}

Σημείωση: Σε ορισμένα ενσωματωμένα προγράμματα αναπαραγωγής (players), το border-radius απευθείας στο iframe μπορεί να μην λειτουργεί πάντα τέλεια, γι' αυτό η μέθοδος με το div (κοντέινερ) παραμένει η πιο αξιόπιστη.