এইচটিএমএল ইউটিউব ভিডিও- HTML YouTube Video
এইচটিএমএলে পেজে ভিডিও চালু করার জন্য সবচেয়ে সহজ পদ্ধতি হলো ইউটিউব ব্যবহার করা। একটি ওয়েব পৃষ্ঠায় একটি ভিডিও এম্বেড করা কাটিং এবং পেস্টিং এর মতই সহজ কাজ। ইউটিউব থেকে আপনার সাইটে আপনার একটি ভিডিও যোগ করার জন্য কত খরচ হয়? উত্তর - কিছুই নেই। বরং ইউটিউব অতিরিক্ত পরিষেবা এবং তাদের ব্যান্ডউইথও সরবরাহ করে।
ভিডিও ফর্ম্যাট নিয়ে ঝামেলা?
আমাদের এই টিউটোরিয়ালের প্রথম দিকে আপনি হয়তো আপনার ভিডিওটিকে বিভিন্ন ফর্ম্যাটে রুপান্তর করেছেন সকল ব্রাউজারে সাপোর্ট করার জন্য। বিভিন্ন ফর্ম্যাটে ভিডিও রুপান্তর করা কঠিন এবং সময় সাপেক্ষ কাজ। এক্ষেত্রে, আপনার ওয়েব পেজে ইউটিউব থেকে সরাসরি ভিডিও চালু করা হতে পারে একটি সহজ সমাধান।
ইউটিউব ভিডিও আইডি
যখন আপনি ইউটিউবে ভিডিও চালু করেন বা সংরক্ষন করেন, তখন ইউটিউব একটি আইডি(যেমনঃ bNRpnd4qWfc) ইউটিউবের লিংকের পরে প্রদর্শন করে। আপনি এই আইডি ব্যবহার করে আপনার এইচটিএমএল কোডে ভিডিওটি সুপারিশ(refer) করতে পারেন।
এইচটিএমএলে ইউটিউব ভিডিও
আপনার ওয়েবপেজে ইউটিউব ভিডিও চালানোর জন্য, নিচের কাজগুলো করতে হবেঃ
- ইউটিউবে ভিডিও আপলোড করুন।
- ভিডিওর আইডি টি নোট করুন।
- আপনার ওয়েব পেজে একটি <iframe> এলিমেন্ট নির্ধারণ করুন।
srcএট্রিবিউটে ভিডিওর URL নির্ধারণ করুন।- ভিডিওটি চালানোর জন্য আয়তন নির্দিষ্ট করতে
widthএবংheightএট্রিবিউট ব্যবহার করুন। - নিম্নের মত URL-এ অন্যান্য প্যারামিটার গুলো সঠিক ভাবে যুক্ত করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ইউটিউব ভিডিও </title>
</head>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/bNRpnd4qWfc"></iframe>
</body>
</html>
ফলাফল
ইউটিউব অটোপ্লে
একজন ব্যবহারকারী যখন আপনার পেজে ভিজিট করবে তখন ভিডিও স্বয়ংক্রিভাবে চালু করার জন্য শুধুমাত্র ইউটিউব URL-এ একটি প্যারামিটার যুক্ত করুন।
Autoplay এট্রিবিউটের ভ্যালু সমুহঃ
| ভ্যালু | বর্ণনা |
|---|---|
| 0 (ডিফল্ট) | যখন প্লেয়ার লোড হবে তখন ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হবে না। |
| 1 | প্লেয়ার লোড হওয়ার সাথে সাথে ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হবে। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ইউটিউব ভিডিও autoplay </title>
</head>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/bNRpnd4qWfc?autoplay=1"></iframe>
</body>
</html>
নিম্নের বাটনে ক্লিক করার সাথে সাথে নতুন একটি পেজ লোড হবে এবং autoplay এট্রিবিউটের জন্য ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হয়ে যাবেঃ
ফলাফল
পরামর্শঃ আপনার ভিডিও স্বয়ংক্রিয়ভাবে চালু করার ব্যাপারে সতর্ক থাকুন। কারণ স্বয়ংক্রিয়ভাবে একটি ভিডিও শুরু হলে আপনার পেজের ভিজিটর বিরক্ত হতে পারে।
ইউটিউব - প্লে-লিস্ট লুপ
আপনি একই পদ্ধতিতে ইউটিউবের প্লে-লিস্ট এম্বেড করতে পারেন। আর একটি ভিডিও কতবার চলবে তা নির্ধারণ করার জন্য loop এট্রিবিউট ব্যবহার করতে হবেঃ
loop এট্রিবিউটের ভ্যালু সমুহঃ
| ভ্যালু | বর্ণনা |
|---|---|
| 0 (ডিফল্ট) | ভিডিওটি শুধুমাত্র একবার চলবে। |
| 1 | ভিডিও লুপ হবে অর্থাৎ ভিডিওটি চলতেই থাকবে। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ইউটিউব প্লে-লিস্ট</title>
</head>
<body>
<iframe width="100%" height="345" src="https://www.youtube.com/embed/videoseries?list=PLAIfaQGwmI0w_CP2KaKwwKcN3Qbpl3vUF&loop=1">
</iframe>
</body>
</html>
ফলাফল
ইউটিউব নিয়ন্ত্রণ প্যানেল
ভিডিও নিয়ন্ত্রন করতে এটি ব্যবহৃত হয়। আর এই প্যানেলটিকে নিয়ন্ত্রন করতে controls এট্রিবিউট ব্যবহার করা হয়।
controls এট্রিবিউটের ভ্যালু সমুহঃ
| ভ্যালু | বর্ণনা |
|---|---|
| 1 (ডিফল্ট) | ভিডিওর প্লেয়ার নিয়ন্ত্রণ প্যানেল প্রদর্শন করে। |
| 0 | ভিডিওর প্লেয়ার নিয়ন্ত্রণ প্যানেল প্রদর্শন করে না। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ইউটিউব ভিডিও নিয়ন্ত্রণ প্যানেল</title>
</head>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/bNRpnd4qWfc?controls=0"></iframe>
</body>
</html>
ফলাফল
ইউটিউব - <object> অথবা <embed> এলিমেন্টের ব্যবহার
আপনি <object> এবং <embed> ট্যাগ ব্যবহার করে আপনার ওয়েব পেজে ইউটিউব ভিডিও প্লে করতে পারবেন তবে ইউটিউব জানুয়ারী ২০১৫ থেকে এই দুইটি ট্যাগের ব্যবহার ডেপ্রিসিয়েটেড(deprecated) ঘোষনা করেছে। আপনি ইউটিউব ভিডিও আপনার ওয়েব পেজে যুক্ত করতে এই দুইটি ট্যাগের পরিবর্তে <iframe> ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ইউটিউব ভিডিওতে object এবং embed এলিমেন্টের ব্যবহার</title>
</head>
<body>
<object width="420" height="345"
data="https://www.youtube.com/embed/bNRpnd4qWfc">
</object>
<embed width="420" height="345"
src="https://www.youtube.com/embed/bNRpnd4qWfc">
</body>
</html>