Βίντεο YouTube του HTML

Η πιο απλή μέθοδος για την ενσωμάτωση βίντεο στο HTML είναι μέσω του YouTube.

Καταστάσεις με τη μορφή βίντεο;

Η μετατροπή του βίντεο σε διαφορετικό μορφή μπορεί να είναι δύσκολη και χρονοβόρα.

Μια πιο απλή λύση είναι να αναπαράγετε το βίντεο στο YouTube στη σελίδα σας.

YouTube Video Id

Όταν αποθηκεύσετε (ή αναπαράγετε) το βίντεο, το YouTube θα εμφανίσει ένα id (π.χ. ih1l6wb7LhU).

Μπορείτε να χρησιμοποιήσετε αυτό το id και να αναφέρετε το βίντεο σας στο κώδικα HTML.

Προσθέστε βίντεο YouTube στο HTML

Για να αναπαράγετε το βίντεο στη σελίδα σας, ακολουθήστε τα παρακάτω βήματα:

  • Ανεβάστε το βίντεο στο YouTube
  • Σημειώστε το id του βίντεο
  • στοιχείο στοιχείων της ιστοσελίδας σας <iframe> στοιχείο
  • Για να καθορίσετε src παράμετρο για να καθορίσετε το URL του βίντεο
  • Χρησιμοποιήστε width και height Παράμετροι για τον καθορισμό του μεγέθους του παίκτη
  • Προσθέστε άλλους παραμέτρους στο URL (βλέπε παρακάτω)

Παράδειγμα

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

Try It Yourself

YouTube Autoplay + Μονόφωνο

Μπορείτε να ξεκινήσετε αυτόματα την αναπαραγωγή του βίντεο όταν ο χρήστης επισκέπτεται τη σελίδα, προσθέτοντας autoplay=1 στο URL του YouTube. Ωστόσο, η αυτόματη αναπαραγωγή βίντεο μπορεί να κάνει τους επισκέπτες σας να νιώθουν ενοχλημένοι!

Note:In most cases, Chromium browsers do not allow autoplay. But always allow muted autoplay.

In autoplay=1 Add after mute=1, which allows your video to start playing automatically (but muted).

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

Try It Yourself

YouTube Playlist

List of videos to play separated by commas (except for the original URL).

YouTube Loop

Add loop=1 It will make your video loop forever.

Value 0 (default): The video will play once.

Value 1: The video will loop (forever).

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

Try It Yourself

YouTube Controls

Add controls=0 It will make the video player not display controls.

Value 0: Player controls are not displayed.

Value 1 (default): Player controls are displayed.

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

Try It Yourself