HTML Embed Webpage - এইচটিএমএল এক্সটার্নাল ওয়েবসাইট
HTML অ্যাডভান্স টপিকস: শিখুন Iframe ও External Content ব্যবহারের নিয়ম
Iframe ব্যবহার করে আমরা একটি ওয়েবপেজের মধ্যে অন্য একটি পেজ বা কনটেন্ট এম্বেড করতে পারি।এর মাধ্যমে আমরা ইউটিউব ভিডিও, গুগল ম্যাপ, অথবা অন্য কোনো ওয়েবসাইট আমাদের পেজে দেখাতে পারি।
এটা ব্যবহার করা সহজ, তবে কিছু সিকিউরিটি ও পারফরম্যান্স বিষয় মাথায় রাখা জরুরি।আজকে আমরা একটি বেসিক iframe এবং কিছু রিয়েল লাইফ উদাহরণ দেখবো।
তাহলে চলুন, কোডের মাধ্যমে দেখে নেওয়া যাক।
💻 HTML কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Example</title>
</head>
<body>
<h2>Embedding an External Website</h2>
<iframe src="https://www.example.com" width="600" height="400" title="Example Site"></iframe>
<h2>Embedding a YouTube Video</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>
📘 প্রতিটি লাইনের ব্যাখ্যা :
🔹 <iframe src="https://www.example.com" width="600" height="400" title="Example Site">
👉 এটি একটি Iframe ট্যাগ, যেখানে src অ্যাট্রিবিউটে যেই ওয়েবসাইটের লিংক দিব, সেই সাইটটি এই পেজে ভেতরে দেখা যাবে।
👉 width এবং height দিয়ে iframe এর আকার নির্ধারণ করি।
👉 title অ্যাট্রিবিউট SEO এবং Accessibility এর জন্য ভালো অভ্যাস।
🔹 <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"...>
👉 এখানে আমরা একটি ইউটিউব ভিডিও এম্বেড করেছি। ইউটিউবের ভিডিও শেয়ার অপশন থেকে "Embed" কোড কপি করে ব্যবহার করেছি।
👉 frameborder="0" ব্যবহার করলে iframe এর চারপাশে কোনো বর্ডার থাকবে না।
👉 allow অ্যাট্রিবিউট দিয়ে ভিডিওর কিছু ফিচার যেমন autoplay, fullscreen, ইত্যাদি অনুমতি দিচ্ছি।
👉 allowfullscreen ব্যবহার করলে ইউজার ভিডিওটি ফুলস্ক্রিনে দেখতে পারবে।
🗣️
“আজ আমরা শিখলাম কীভাবে HTML-এর iframe ট্যাগ দিয়ে বাইরের ওয়েব কনটেন্ট আমাদের ওয়েবপেজে দেখাতে পারি।
এটা অনেক কাজে আসে যেমন: ভিডিও এম্বেড করা, ম্যাপ দেখানো, কিংবা অন্য পেজ যুক্ত করা।
তবে সব সময় মনে রাখতে হবে, সব ওয়েবসাইট iframe এর মাধ্যমে লোড হতে দেয় না — সিকিউরিটি কারণে।
