Embed Any Part Of The Website On Your Website

Code:
<style>
.play{ 
width: 529px; 
height: 311px; 
position: relative; 
border: 5px solid red; 
overflow: hidden; 
} 
.play iframe{ 
width: 1920px; 
height: 1280px; 
position: absolute; 
top: -67px; 
left: -0px; 
} 
</style> 
<div class="play"> 
<iframe allowfullscreen="allowfullscreen" frameborder="no" scrolling="no" src="https://bongobd.com/channel/rtv"></iframe> 
</div>


স্টাইল Css পার্টঃ
এখানে .play নির্দিষ্ট একটি ফাকা ডিভিসন বা বক্স এর দৈঘ্য ৩১১ পিক্সেল প্রস্থ ৫২৯ পিক্সেল। এর মধ্যেই আমরা অন্য কোন ওয়েবসাইটের নির্দিষ্ট অংশ embed করে দেখাবো। ছোট কোনো অংশ দেখানোর এর দৈঘ্য এবং প্রস্থ কমাতে হবে। বড় কোনো অংশ দেখানোর এর দৈঘ্য এবং প্রস্থ বাড়াতে হবে। আর এই div বক্সটি যেন অন্য কিছুর উপর প্রভাব না পরে সেজন্য পজিশন রিলেটিভ দেওয়া হয়েছে। আর বক্সের বাহিরের সবকিছু হাইড করতে overflow: hidden দেওয়া হয়েছে। আর বক্সের সাইজ জানতে border: 5px solid red দেওয়া হয়েছে এতে করে বক্সের চারদিকে লাল বর্ডার দেখা যাবে।

এখানে .play iframe দেওয়া হয়েছে কারন play div বক্সটি হলো ফাকা বক্স। এর মধ্যে ওয়েবসাইটের নির্দিষ্ট অংশ embed করবো। 
এখন iframe বা ভিতোরের কন্টেন্ট বক্সের সাইজ ঠিক করতে হবে। যদি ছোট অংশ দেখাতে চান তাহলে এখানের দৈঘ্য এবং প্রস্থ বাড়াতে হবে। তারপর iframe টিকে নির্দিষ্ট স্থানে বসানোর জন্য position: absolute দেওয়া হয়েছে। তারপর ডানে বামে সরিয়ে নির্দিষ্ট অংশ দেখাতে left: -0px দেওয়া হয়েছে। তারপর উপরে নিচে সরিয়ে নির্দিষ্ট অংশ দেখাতে top: -67pxদেওয়া হয়েছে।

মূল কন্টেন্ট Body পার্টঃ
আগের গুলো ছিলো স্টাইল মূল কন্টেন্ট হলো এগুলোই। ফাকা বক্স বানাতে এখানে একটি ডিভিশন নেওয়া হয়েছে যেমন <div class="play">। একে </div> ক্লজ করা হয়েছে। এর মধ্যে iframe src বসিয়ে scrolling="no" করা হয়ে যেন আপনার দেখানো অংশের বাইরে স্কল করে কেউ কিছু না দেখতে পারে। আর যদি আপনি আমাদের মতো ভিডিও প্লেয়ার embed করেন তাহলে  allowfullscreen="allowfullscreen" করে দিন এতে করে ভিডিও full screen এ দেখা যাবে।

Review: