1 / 11
Εφαρμογές Πληροφορικής · Α΄ Λυκείου

Βίντεο στην HTML
<video> & <iframe>
Τοπικό video · Ενσωμάτωση YouTube

Ετικέτες <video> · <source> · <iframe> · attributes · YouTube embed

🖥️ Notepad++ ▶️ YouTube ⚡ Kahoot 📁 eClass ⏱️ 45΄
2 / 11
Επανάληψη — 6ο Μάθημα

Τι μάθαμε στο προηγούμενο μάθημα

Ετικέτα <img>

Self-closing — δεν έχει
</img>
Εισάγει εικόνα στη σελίδα

Attributes

src="" διαδρομή αρχείου
alt="" εναλλακτικό κείμενο
width="" πλάτος
height="" ύψος

Style

border
border-radius
opacity
margin: 0 auto

💡 Σήμερα κάνουμε το επόμενο βήμα — προσθέτουμε βίντεο στις σελίδες μας, τόσο τοπικά αρχεία όσο και βίντεο από το YouTube!
3 / 11
Εισαγωγή

Δύο τρόποι εισαγωγής βίντεο στην HTML

🎬
Τρόπος 1 — <video>
Τοπικό αρχείο βίντεο
  • Το αρχείο βίντεο βρίσκεται στον υπολογιστή ή server
  • Μορφές: .mp4, .webm, .ogg
  • Χρησιμοποιούμε την ετικέτα <video>
  • Πλήρης έλεγχος εμφάνισης
▶️
Τρόπος 2 — <iframe>
Ενσωμάτωση από YouTube
  • Το βίντεο βρίσκεται στο YouTube
  • Δεν χρειαζόμαστε αποθηκευμένο αρχείο
  • Χρησιμοποιούμε την ετικέτα <iframe>
  • Εύκολη ενσωμάτωση με Copy-Paste
📌 Και οι δύο τρόποι δουλεύουν σε όλους τους σύγχρονους browsers (Chrome, Firefox, Edge, Safari).
4 / 11
Τρόπος 1 — <video>

Η ετικέτα <video> — Βασική Σύνταξη

Η ετικέτα <video> έχει opening και closing tag, μέσα της βάζουμε την <source>.

<video width="640" height="360" controls>
  <source src="videos/myvideo.mp4" type="video/mp4">
  Ο browser σας δεν υποστηρίζει βίντεο HTML5.
</video>
<video> Η κύρια ετικέτα — έχει opening και closing
controls Εμφανίζει τα κουμπιά αναπαραγωγής
<source> Δηλώνει το αρχείο — self-closing
type="video/mp4" Λέει στον browser τη μορφή αρχείου
💡 Το κείμενο "Ο browser σας δεν υποστηρίζει βίντεο HTML5" εμφανίζεται μόνο σε πολύ παλιούς browsers — σαν το alt="" στις εικόνες!
5 / 11
Attributes της <video>

Τα σημαντικότερα attributes

Attribute Τι κάνει Παράδειγμα
controls Εμφανίζει play/pause, volume, fullscreen controls
autoplay Ξεκινά αυτόματα (χρειάζεται muted) autoplay muted
loop Επαναλαμβάνει το βίντεο συνεχώς loop
muted Ξεκινά χωρίς ήχο muted
poster Εικόνα-εξώφυλλο πριν ξεκινήσει poster="thumb.jpg"
width / height Διαστάσεις σε pixels width="640" height="360"
⚠️ Τα attributes controls, autoplay, loop, muted δεν έχουν τιμή — γράφονται μόνα τους!
6 / 11
Παραδείγματα <video>

Βίντεο με διάφορα attributes

▶ Βίντεο με controls + poster

<video
  width="400"
  controls
  poster="cover.jpg">
  <source src="clip.mp4"
    type="video/mp4">
</video>
▶
cover.jpg ως thumbnail
0:00 / 2:34 🔊

🔄 Βίντεο autoplay + loop + muted

<video
  width="400"
  autoplay
  loop
  muted>
  <source src="bg.mp4"
    type="video/mp4">
</video>
ℹ️ Χρησιμοποιείται συχνά για background video σε ιστοσελίδες — ξεκινά αθόρυβα και επαναλαμβάνεται.
7 / 11
Μορφές αρχείων & Οργάνωση

Μορφές βίντεο & Οργάνωση φακέλων

📁 Δομή φακέλων
my-site/
├── index.html
├── images/
│   └── photo.jpg
└── videos/
    ├── clip.mp4
    └── cover.jpg

Τα βίντεο στον φάκελο videos/ — πεζά, χωρίς κενά!

🎬 Μορφές βίντεο
Μορφή type= Υποστήριξη
.mp4 video/mp4 ✅ Όλοι browsers
.webm video/webm ✅ Chrome/Firefox
.ogg video/ogg ⚠️ Παλαιότερα
✅ Χρησιμοποίησε πάντα .mp4 — δουλεύει παντού!
❌ Λάθος — κενά στο όνομα
<source src="videos/my video.mp4">
✅ Σωστό — χωρίς κενά, πεζά
<source src="videos/my-video.mp4">
8 / 11
Τρόπος 2 — YouTube <iframe>

Ενσωμάτωση βίντεο από YouTube

Χρησιμοποιούμε την ετικέτα <iframe> (inline frame) για να εμφανίσουμε το YouTube player μέσα στη σελίδα μας.

<iframe
  width="640"
  height="360"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Τίτλος βίντεο"
  allowfullscreen
></iframe>
Το YouTube βίντεο εμφανίζεται εδώ μέσα στη σελίδα σου!
📌 VIDEO_ID είναι ο κωδικός που βλέπεις στο URL του YouTube:
youtube.com/watch?v=dQw4w9WgXcQ — αυτό το τμήμα μετά το v=
9 / 11
Βήμα-βήμα — YouTube Embed

Πώς βρίσκω το embed link από YouTube;

  1. 1 Πήγαινε στο βίντεο που θέλεις στο youtube.com
  2. 2 Κάνε κλικ στο κουμπί «Κοινή χρήση» (Share) κάτω από το βίντεο
  3. 3 Στο παράθυρο που ανοίγει, επέλεξε «Ενσωμάτωση» (Embed)
  4. 4 Αντέγραψε τον κώδικα <iframe> που σου δίνει — περιέχει ήδη το σωστό src=""
  5. 5 Κάνε Paste μέσα στο <body> της HTML σελίδας σου στο Notepad++
  6. 6 Άνοιξε στον browser — το YouTube βίντεο θα εμφανίζεται στη σελίδα σου!
💡 Μπορείς να αλλάξεις το width και height για να προσαρμόσεις το μέγεθος!
10 / 11
Πλήρες Παράδειγμα

Πλήρης HTML σελίδα με βίντεο

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <title>Η σελίδα μου με βίντεο</title>
</head>
<body>
  <h1>Το αγαπημένο μου βίντεο</h1>

  <!-- Τοπικό βίντεο -->
  <video width="600" controls poster="images/cover.jpg">
    <source src="videos/myclip.mp4" type="video/mp4">
  </video>

  <h2>Βίντεο από YouTube</h2>
  <!-- YouTube embed -->
  <iframe width="600" height="340"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Τίτλος" allowfullscreen></iframe>
</body>
</html>
11 / 11
Ανακεφαλαίωση

Τι μάθαμε σήμερα;

🎮 Ώρα για Kahoot!

Πήγαινε στο kahoot.it και βάλε τον κωδικό

kahoot.it
1 / 11