🟢11.3 Ενσωμάτωση (Embedding)

💪🏻Δραστηριότητα: Δημιουργία μιας Video Gallery

🔗https://www.w3schools.com/html/

Βήμα 1: Κάντε (scroll) λίγο κάτω και πατήστε το κουμπί Try it yourself!

Βήμα 2: Πλοηγηθείτε στο YouTube και πατήστε τις τελείτσες του βίντεο για να πάρετε τον HTML κώδικα από ένα YouTube video:

Βήμα 3: Έπειτα πατήστε την επιλογή Κοινοποίηση (Share)

Βήμα 4: Έπειτα πατήστε την επιλογή Embed < >

Βήμα 5: Πατήστε το κουμπί Αντιγραφή (Copy)

Βήμα 5: Ανάμεσα στην ετικέτα <body> ... </body> αντιγράψτε τον παρακάτω κώδικα HTML από τα βίντεο στοιχεία μέσα στο <body> ... </body>

<div>
	<span>
      <iframe width="auto" height="auto" src="https://www.youtube.com/embed/JVZTP_kX5BE?si=OwL8twmo22_vjS9F" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	</span>
  	<span>
      <iframe width="auto" height="auto" src="https://www.youtube.com/embed/J9f68o8JQjw?si=bMvN1j9IO3FEY06v" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  	</span>

	<span>
		<iframe width="auto" height="auto" src="https://www.youtube.com/embed/GXlckaGr0Eo?si=ArHrWxpYeyVr62Mf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	</span>
</div>

Βήμα 6: Τροποιήστε τον κώδικα να λέει auto για τα χαρακτηριστικά width και height για το κάθε βίντεο.

Βήμα 7: Πατήστε Run για να δείτε τι κάνατε