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