آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML با من همراه باشید.
Free-Learn
ویدئوهای یوتیوب در HTML
اگر فری لرن رو در بخش های قبلی دنبال کرده باشید میدانید که ما نحوه قرار دادن صدا / موزیک و بطور کلی فایل های صوتی و همچنین نحوه قرار دادن ویدئو / کلیپ و بطور کلی فایل های تصویری را در HTML بطور کامل یاد گرفتیم.
ولی در این بخش ما میخواهیم به راحتی و بدون هیچگونه دردسری و تنها با یک خط کد ویدئوهای وبسایت یوتیوب (YouTube) را در صفحات وب مان قرار دهیم و آنها به راحتی برای کاربرانمان به نمایش دربیاوریم.
دوستان محترم، بدلیل فیلتر بودن وبسایت یوتیوب در ایران، برای مشاهده مثال هایی که در این آموزش ارائه شده است باید حتما از یک ف-یلتر ش-کن استفاده نمایید، در غیراینصورت هیچ ویدئویی به شما نمایش داده نخواهد نشد.
Free-Learn
نحوه قرار دادن ویدئوهای یوتیوب در HTML
خب در ادامه میخواهیم یاد بگیریم که چگونه میتوان ویدئوهای سایت یوتیوب را درون صفحات وب HTML قرار داد، ما باید بطور کلی مراحل زیر را برای قرار دادن یک ویدئو از سایت یوتیوب درون صفحات HTML انجام دهیم :
- بدست آوردن Id ویدئوی مورد نظر در سایت یوتیوب
- قرار دادن آی دی بدست آمده در تگ Iframe برای نمایش ویدئو
Free-Learn
نحوه بدست آوردن ID یک ویدئو در وبسایت یوتیوب
برای بدست آوردن id یک ویدئو در وبسایت یوتیوب کافیه همانند تصویر زیر عمل نماییم، یعنی قسمت مشخص شده در تصویر زیر می شود همان id ویدئوی مورد نظر که ما با استفاده از همین id میخواهیم ویدئوهای یوتیوب را درون صفحات وب به نمایش دربیاوریم.
خب حالا که id ویدئوی مورد نظرمون رو بدست آوردیم در ادامه میخواهیم این ویدئو را در صفحات وبمون به نمایش بیاوریم، لطفا در ادامه با من همراه باشید.
Free-Learn
نحوه قرار دادن id ویدئوی یوتیوب در تگ <iframe>
خب پس ما id ویدئوی مورد نظرمون رو بدست آوردیم، در ادامه میخواهیم با استفاده از تگ <iframe> و <id> بدست آمده ویدئوهای وبسایت یوتیوب را درون صفحات وبمان به نمایش دربیاوریم.
آموزش کار با تگ Iframe را از اینجا میتوانید مشاهده نمایید.
شکل کلی برای قرار دادن ویدئوهای وبسایت یوتیوب در صفحات HTML بصورت زیر می باشد:
|
1 |
<iframe src="https://www.youtube.com/embed/آی دی ویدئو"></iframe> |
که بجای متن آی دی ویدئو باید همان ID که از ویدئو در یوتیوب بدست آوردیم را قرار دهیم. به همین راحتی!
|
1 2 3 4 5 |
<body> <iframe src="https://www.youtube.com/embed/sJFDBkvuFbc"></iframe> </body> |
حال اگر لطف بفرمایید و بروی دکمه (امتحان کنید) کلیک نمایید میتوانید در خروجی مشاهده نمایید که یک ویدئو از وبسایت یوتیوب برای ما به راحتی نمایش در می آید.
Free-Learn
پخش خودکار ویدئوی یوتیوب در HTML
ما به راحتی و با استفاده از صفت autoplay میتوانیم قابلیت پخش خودکار ویدئومان را فعال نماییم، یعنی به محض اینکه صفحه بارگذاری شد ویدئوی موجود در صفحه نیز پخش می شود.
استفاده از قابلیت پخش خودکار ممکن است به میل کاربران سایتتان نباشد و موجب آزار و اذیت آنها شود که همین میتواند موجب فرار کاربر از وبسایتتان شود.
- مقدار ۱ یعنی پخش خودکار فعال باشد
- مقدار ۰ یعنی پخش خودکار غیرفعال باشد (بصورت پیش فرض این گزینه فعال می باشد)
|
1 2 3 4 5 |
<body> <iframe src="https://www.youtube.com/embed/sJFDBkvuFbc?autoplay=1"></iframe> </body> |
Free-Learn
نمایش یا عدم نمایش کنترل های ویدئو
با استفاده از صفت controls میتوان مشخص کرد که آیا کنترل های پخش در ویدئو نمایش داده شوند یا خیر، که ۲ مقدار میتواند بپذیرد:
- مقدار ۰ یعنی کنترل ها نمایش داده نشوند
- مقدار ۱ یعنی کنترل ها نمایش داده شوند (بصورت پیش فرض این گزینه فعال می باشد)
|
1 2 3 4 5 |
<body> <iframe src="https://www.youtube.com/embed/sJFDBkvuFbc?controls=0"></iframe> </body> |
Free-Learn
نمایش ویدئوی یوتیوب با استفاده از تگ <object>
ما علاوه بر تگ Iframe نیز میتوانیم از تگ <object> برای نمایش ویدئوهای سایت یوتیوب استفاده نماییم.
آموزش کار با تگ object را از اینجا میتوانید مشاهده نمایید.
|
1 2 3 4 5 |
<body> <object data="https://www.youtube.com/embed/sJFDBkvuFbc"></object> </body> |
Free-Learn
نمایش ویدئوی یوتیوب با استفاده از تگ <embed>
علاوه بر تگ object ما نیز میتوانیم از تگ <embed> برای نمایش ویدئوهای سایت یوتیوب استفاده نماییم.
یوتیوب استفاده از تگ های Object و Embed را برای نمایش ویدئوهایش منع کرده و بجای آن استفاده از تگ Iframe را توصیه می کند. لذا شما هم از Iframe استفاده نمایید.
|
1 2 3 4 5 |
<body> <embed src="https://www.youtube.com/embed/sJFDBkvuFbc"> </body> |
خب دوستان خسته نباشید اینم از بخش (آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML) که به پایان رسید, امیدوارم که مشکلی در این بخش نداشته باشید.
Free-Learn
- دانلود PDF این آموزش
- برای دانلود فایل PDF این آموزش کلیک نمایید
