AMP Iframe বা Embedding Content (amp-iframe) হল একটি AMP (Accelerated Mobile Pages) প্রযুক্তির অংশ যা ওয়েব পেজে অন্যান্য কন্টেন্ট, যেমন: ভিন্ন ওয়েবসাইট বা কন্টেন্ট এম্বেড করতে ব্যবহৃত হয়। AMP-iframe এর মাধ্যমে আপনি একাধিক কন্টেন্ট সোর্স যেমন, ভিডিও, ম্যাপ, এবং অন্যান্য ওয়েব পেজ ইনলাইনভাবে আপনার AMP পেজে এম্বেড করতে পারেন, এবং এটি অ্যাপ্লিকেশনের পারফরম্যান্সে সমস্যা সৃষ্টি না করে দ্রুত লোড হয়।
AMP Iframe (amp-iframe) কী?
<amp-iframe> হল একটি বিশেষ ট্যাগ যা AMP পেজে ইফ্রেম বা ইনলাইন এম্বেডেড কন্টেন্ট যোগ করার জন্য ব্যবহৃত হয়। এটি AMP সাইটের জন্য বিশেষভাবে ডিজাইন করা হয়েছে, যাতে অন্য সাইটের কন্টেন্ট বা মিডিয়া দ্রুত লোড হয় এবং ব্যবহারকারীর অভিজ্ঞতা ভালো থাকে।
AMP Iframe ট্যাগের মূল বৈশিষ্ট্য
- অটো সাইজিং: AMP-iframe একটি নির্দিষ্ট সাইজ ধরে রাখে এবং এটি স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসে সঠিকভাবে ফিট করে, যেমন মোবাইল, ট্যাবলেট এবং ডেস্কটপ।
- ব্রাউজার পারফরম্যান্স অপ্টিমাইজেশন: AMP iframe ট্যাগ একটি বিশেষ AMP লাইব্রেরি ব্যবহার করে, যার মাধ্যমে ইফ্রেমের কন্টেন্ট দ্রুত লোড হয়।
- স্ক্রলিং এবং কন্ট্রোল: AMP iframe কন্টেন্ট স্ক্রল করতে সক্ষম, তবে এটিতে কিছু সীমাবদ্ধতা থাকে। সাধারণ HTML iframe এর তুলনায় AMP iframe আরো অপ্টিমাইজড থাকে।
AMP Iframe (amp-iframe) ট্যাগ ব্যবহার করার নিয়ম
AMP পেজে iframe এম্বেড করতে, আপনাকে amp-iframe ট্যাগ ব্যবহার করতে হবে, যা সাধারণ HTML iframe ট্যাগের পরিবর্তে ব্যবহৃত হয়। নীচে একটি উদাহরণ দেওয়া হলো:
উদাহরণ: AMP Iframe (Embedding Content)
<amp-iframe width="600" height="400" layout="responsive" sandbox frameborder="0" scrolling="no" src="https://www.example.com"></amp-iframe>বিশদ বর্ণনা:
- width: এটি iframe এর প্রস্থ নির্ধারণ করে।
- height: এটি iframe এর উচ্চতা নির্ধারণ করে।
- layout="responsive": এটি iframe এর রেসপন্সিভ ডিজাইন নিশ্চিত করে, যাতে এটি বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শিত হয়।
- sandbox: এটি iframe এর নিরাপত্তা বাড়ানোর জন্য ব্যবহৃত হয়। এই অ্যাট্রিবিউটটি iframe এর মধ্যে স্ক্রিপ্ট বা ফর্ম সাবমিটিং আটকাতে সাহায্য করে।
- frameborder="0": iframe এর চারপাশে বর্ডার না দেখানোর জন্য ব্যবহৃত হয়।
- scrolling="no": স্ক্রল বার বন্ধ করে দেয়।
- src: এটি iframe এর উৎস URL নির্দেশ করে, যেখানে আপনি যে কন্টেন্ট বা ওয়েব পেজ এম্বেড করতে চান তা থাকবে।
AMP Iframe এর উদাহরণ: ভিডিও এম্বেড করা
যদি আপনি কোনো ভিডিও বা মিডিয়া প্ল্যাটফর্মের কন্টেন্ট AMP পেজে এম্বেড করতে চান, তবে নিম্নলিখিত উদাহরণ অনুসরণ করতে পারেন।
<amp-iframe width="560" height="315" layout="responsive" sandbox frameborder="0" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></amp-iframe>এখানে YouTube ভিডিও এম্বেড করা হয়েছে এবং layout="responsive" অ্যাট্রিবিউটটি ভিডিওর আকার রেসপন্সিভ রাখার জন্য ব্যবহার করা হয়েছে।
AMP Iframe ব্যবহারের সীমাবদ্ধতা
- JavaScript সীমাবদ্ধতা: AMP-iframe ট্যাগের মধ্যে JavaScript ব্যবহার সীমিত, কারণ AMP পেজে JavaScript কে সাধারণত নিষিদ্ধ করা হয়। তবে,
sandboxঅ্যাট্রিবিউটটি ব্যবহারের মাধ্যমে iframe এর মধ্যে JavaScript নিষ্ক্রিয় করা যেতে পারে। - কনটেন্টের ডোমেইন: কিছু ক্ষেত্রে,
srcঅ্যাট্রিবিউটে যেসব URL দেয়া হয়, সেগুলি AMP পেজের জন্য কনফিগার করা থাকতে পারে। অন্যথায়, বাইরের ডোমেইন বা কন্টেন্ট ইফ্রেমে লোড হতে পারে না। - কাস্টমাইজেশন সীমাবদ্ধতা: AMP-iframe ট্যাগের কিছু স্টাইলিং এবং কাস্টমাইজেশন সীমিত। যেহেতু এটি AMP এর একটি অংশ, আপনি কিছু কাস্টম কোড বা ফিচার যোগ করতে পারবেন না যা সাধারণ HTML iframe এর মাধ্যমে করা যায়।
AMP Iframe (Embedding Content) এর সুবিধা
- দ্রুত লোডিং: AMP-iframe ট্যাগটি অন্যান্য iframe এর তুলনায় দ্রুত লোড হয় কারণ এটি AMP লাইব্রেরির সাহায্যে অপ্টিমাইজড হয়।
- রেসপন্সিভ ডিজাইন: AMP iframe মোবাইল এবং ডেস্কটপে সঠিকভাবে ফিট করে, যা ব্যবহারকারীদের জন্য একটি উন্নত অভিজ্ঞতা তৈরি করে।
- নিরাপত্তা:
sandboxঅ্যাট্রিবিউটের মাধ্যমে iframe এর কন্টেন্ট নিরাপদ করা যায় এবং এটি অপ্রত্যাশিত স্ক্রিপ্ট কার্যকলাপ রোধ করে।
AMP Iframe এর ব্যবহার কেস
AMP-iframe বিশেষত যে পরিস্থিতিতে ব্যবহার করা হয়, সেগুলি অন্তর্ভুক্ত:
- ভিডিও এম্বেডিং: YouTube বা Vimeo এর মতো ভিডিও প্ল্যাটফর্ম থেকে ভিডিও এম্বেড করতে।
- ম্যাপ এম্বেডিং: Google Maps বা অন্যান্য ম্যাপ সার্ভিস এম্বেড করতে।
- কাস্টম কন্টেন্ট: অন্যান্য ওয়েব পেজের কন্টেন্ট অথবা কাস্টম ডিজাইন করা কন্টেন্ট এম্বেড করতে।
AMP Iframe বা embedding content ব্যবহার করে আপনি আপনার AMP পেজে তৃতীয় পক্ষের কন্টেন্ট সহজে এবং দ্রুত লোড করে প্রদর্শন করতে পারেন, যা মোবাইল ব্যবহারকারীদের জন্য একটি দ্রুত এবং নিরাপদ অভিজ্ঞতা প্রদান করে।
Read more
