آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML با من همراه باشید.

آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML

Free-Learn

ویدئوهای یوتیوب در HTML

اگر فری لرن رو در بخش های قبلی دنبال کرده باشید میدانید که ما نحوه قرار دادن صدا / موزیک و بطور کلی فایل های صوتی و همچنین نحوه قرار دادن ویدئو / کلیپ و بطور کلی فایل های تصویری را در HTML بطور کامل یاد گرفتیم.

ولی در این بخش ما میخواهیم به راحتی و بدون هیچگونه دردسری و تنها با یک خط کد ویدئوهای وبسایت یوتیوب (YouTube) را در صفحات وب مان قرار دهیم و آنها به راحتی برای کاربرانمان به نمایش دربیاوریم.

دوستان محترم، بدلیل فیلتر بودن وبسایت یوتیوب در ایران، برای مشاهده مثال هایی که در این آموزش ارائه شده است باید حتما از یک ف-یلتر ش-کن استفاده نمایید، در غیراینصورت هیچ ویدئویی به شما نمایش داده نخواهد نشد.

Free-Learn

نحوه قرار دادن ویدئوهای یوتیوب در HTML

خب در ادامه میخواهیم یاد بگیریم که چگونه میتوان ویدئوهای سایت یوتیوب را درون صفحات وب HTML قرار داد، ما باید بطور کلی مراحل زیر را برای قرار دادن یک ویدئو از سایت یوتیوب درون صفحات HTML انجام دهیم :

  • بدست آوردن Id ویدئوی مورد نظر در سایت یوتیوب
  • قرار دادن آی دی بدست آمده در تگ Iframe برای نمایش ویدئو

Free-Learn

نحوه بدست آوردن ID یک ویدئو در وبسایت یوتیوب

برای بدست آوردن id یک ویدئو در وبسایت یوتیوب کافیه همانند تصویر زیر عمل نماییم، یعنی قسمت مشخص شده در تصویر زیر می شود همان id ویدئوی مورد نظر که ما با استفاده از همین id میخواهیم ویدئوهای یوتیوب را درون صفحات وب به نمایش دربیاوریم.

آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML

خب حالا که id ویدئوی مورد نظرمون رو بدست آوردیم در ادامه میخواهیم این ویدئو را در صفحات وبمون به نمایش بیاوریم، لطفا در ادامه با من همراه باشید.

Free-Learn

نحوه قرار دادن id ویدئوی یوتیوب در تگ <iframe>

خب پس ما id ویدئوی مورد نظرمون رو بدست آوردیم، در ادامه میخواهیم با استفاده از تگ <iframe> و <id> بدست آمده ویدئوهای وبسایت یوتیوب را درون صفحات وبمان به نمایش دربیاوریم.

آموزش کار با تگ Iframe را از اینجا میتوانید مشاهده نمایید.

شکل کلی برای قرار دادن ویدئوهای وبسایت یوتیوب در صفحات HTML بصورت زیر می باشد:

که بجای متن آی دی ویدئو باید همان ID که از ویدئو در یوتیوب بدست آوردیم را قرار دهیم. به همین راحتی!

امتحان کنید

حال اگر لطف بفرمایید و بروی دکمه (امتحان کنید) کلیک نمایید میتوانید در خروجی مشاهده نمایید که یک ویدئو از وبسایت یوتیوب برای ما به راحتی نمایش در می آید.

Free-Learn

پخش خودکار ویدئوی یوتیوب در HTML

ما به راحتی و با استفاده از صفت autoplay میتوانیم قابلیت پخش خودکار ویدئومان را فعال نماییم، یعنی به محض اینکه صفحه بارگذاری شد ویدئوی موجود در صفحه نیز پخش می شود.

استفاده از قابلیت پخش خودکار ممکن است به میل کاربران سایتتان نباشد و موجب آزار و اذیت آنها شود که همین میتواند موجب فرار کاربر از وبسایتتان شود.

  • مقدار ۱ یعنی پخش خودکار فعال باشد
  • مقدار ۰ یعنی پخش خودکار غیرفعال باشد (بصورت پیش فرض این گزینه فعال می باشد)

امتحان کنید

Free-Learn

نمایش یا عدم نمایش کنترل های ویدئو

با استفاده از صفت controls میتوان مشخص کرد که آیا کنترل های پخش در ویدئو نمایش داده شوند یا خیر، که ۲ مقدار میتواند بپذیرد:

  • مقدار ۰ یعنی کنترل ها نمایش داده نشوند
  • مقدار ۱ یعنی کنترل ها نمایش داده شوند (بصورت پیش فرض این گزینه فعال می باشد)

امتحان کنید

Free-Learn

نمایش ویدئوی یوتیوب با استفاده از تگ <object>

ما علاوه بر تگ Iframe نیز میتوانیم از تگ <object> برای نمایش ویدئوهای سایت یوتیوب استفاده نماییم.

آموزش کار با تگ object را از اینجا میتوانید مشاهده نمایید.


امتحان کنید

Free-Learn

نمایش ویدئوی یوتیوب با استفاده از تگ <embed>

علاوه بر تگ object ما نیز میتوانیم از تگ <embed> برای نمایش ویدئوهای سایت یوتیوب استفاده نماییم.

یوتیوب استفاده از تگ های Object و Embed را برای نمایش ویدئوهایش منع کرده و بجای آن استفاده از تگ Iframe را توصیه می کند. لذا شما هم از Iframe استفاده نمایید.


امتحان کنید

خب دوستان خسته نباشید اینم از بخش (آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML) که به پایان رسید, امیدوارم که مشکلی در این بخش نداشته باشید.

Free-Learn