TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

ইউটিউব, ভিমিও ভিডিও লাইটবক্স পপআপ উইবলির জন্য

0

Weebly আপনার সাইটে ভিডিও এম্বেড করার জন্য অনেক উপাদান প্রদান করে। ইউটিউব এবং এম্বেড কোড উপাদান বিনামূল্যে ব্যবহারকারীদের জন্য উপলব্ধ। হোস্ট করা এইচডি ভিডিও প্লেয়ার উপাদান শুধুমাত্র প্রো এবং উচ্চতর প্ল্যান ব্যবহারকারীদের জন্য উপলব্ধ। কিন্তু এই সমস্ত বিকল্পগুলি আপনাকে পপআপ লাইটবক্সে দেখানোর সম্ভাবনা ছাড়াই পৃষ্ঠায় ভিডিওগুলি এম্বেড করার অনুমতি দেবে। এই প্রবন্ধে আমরা ব্যাখ্যা করব কিভাবে jQuery উইজেট ব্যবহার করে একটি পপআপ লাইটবক্সে ইউটিউব এবং ভিমিও ভিডিও এম্বেড করা যায় ।

এখানে উইজেটের কিছু বৈশিষ্ট্য রয়েছে:

  • আপনি উইজেটটিকে একটি টেক্সট বা বোতাম বা একটি ছবিতে লিঙ্ক করতে পারেন।
  • ভিডিও একটি লাইটবক্স পপআপ মোডে খুলবে, যখনই ব্যবহারকারীরা একটি লিঙ্কে ক্লিক করবে।
  • ইউটিউব, ভিমিও বা অন্য কোন ভিডিও সোর্স লিঙ্ক করা সম্ভব।
  • আপনি আপনার সাইটের লেআউটের জন্য সামঞ্জস্য করতে পপআপের প্রস্থ এবং উচ্চতা কাস্টমাইজ করতে পারেন।
  • পপআপ বন্ধ করার জন্য উইজেটের দুটি বিকল্প রয়েছে – হয় বন্ধ বোতামটি ক্লিক করে বা বাইরের ওভারলে এলাকায় ক্লিক করে।
  • ভিডিও পপআপ সম্পূর্ণরূপে প্রতিক্রিয়াশীল এবং সমস্ত ডিভাইসে কাজ করে।

কিভাবে উইবেলি সাইটে উইজেট যুক্ত করবেন?

ধাপ 1 – ফাইলগুলি ডাউনলোড করুন

ভিডিও লাইটবক্স উইজেটের জন্য jQuery স্ক্রিপ্ট, CSS এবং HTML প্রয়োজন। জিপ আর্কাইভ ফাইল "ভিডিও Lightbox.zip" ডাউনলোড করুন নিচের ডাউনলোড বাটনে ক্লিক করে।

সংরক্ষণাগারটি আনজিপ করুন এবং নিম্নলিখিত আইটেমগুলি বের করুন:

  • video-popup.js
  • video-popup.css
  • বন্ধ। PNG

ধাপ 2 – Weebly এ ফাইল আপলোড করা

দ্বিতীয় ধাপ হল আপনার Weebly সাইটে সমস্ত ফাইল আপলোড করা । "থিম" ট্যাবে নেভিগেট করুন এবং " HTML / CSS সম্পাদনা করুন " বোতামে ক্লিক করুন। আপনাকে Weebly কোড এডিটরে নিয়ে যাওয়া হবে এবং "সম্পদ" বিভাগে নেভিগেট করা হবে। তিনটি ফাইল আপলোড করুন এবং আপনার পরিবর্তনগুলি সংরক্ষণ করুন।

ইউটিউব, ভিমিও ভিডিও লাইটবক্স পপআপ উইবলির জন্য

উইবেলে উইজেট ফাইল আপলোড করা হচ্ছে

দ্রষ্টব্য: আপনার যদি সম্পদ বিভাগের অধীনে প্রচুর ফাইল আপলোড করা থাকে তবে "ভিডিওলাইটবক্স" নামে একটি নতুন ফোল্ডার তৈরি করুন এবং ফোল্ডারের ভিতরে ফাইলগুলি আপলোড করুন।

ধাপ 3 – আপলোড করা ফাইলগুলির জন্য লিঙ্ক

আপলোড করা ফাইলগুলিতে নিম্নলিখিত আপেক্ষিক লিঙ্ক থাকবে:

  • /files/theme/video-popup.js
  • /files/theme/video-popup.css
  • /files/theme/close.png

আপনি নিচের মত পরম URL গুলি ব্যবহার করতে পারেন:

যদি এটি কাজ না করে, আপলোড করা ফাইলে ডান ক্লিক করুন এবং সম্পূর্ণ Weebly URL অনুলিপি করুন। এটি নীচের মত হওয়া উচিত:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/881978474505006211/files/close.png

নিম্নলিখিত বিভাগগুলিতে সঠিক URL ব্যবহার করতে ভুলবেন না। আপনি যদি সন্দেহ করেন, ব্রাউজারে সম্পূর্ণ URL টি পেস্ট করুন এবং আপনি বিষয়বস্তু দেখতে পারেন কিনা তা পরীক্ষা করুন।

ধাপ 4 – Weebly পৃষ্ঠায় স্ক্রিপ্ট লিঙ্ক করা

আপনার Weebly সাইটে, ভিডিও লাইটবক্স উইজেট সন্নিবেশ করতে চান এমন পৃষ্ঠাটি খুলুন এবং "SEO সেটিংস> ফুটার কোড" বিভাগে যান। পৃষ্ঠার পাদলেখের স্ক্রিপ্ট ফাইলটি লিঙ্ক করতে নিম্নলিখিত কোডটি আটকান:

<script type="text/javascript" src="/files/theme/video-popup.js"></script>

ইউটিউব, ভিমিও ভিডিও লাইটবক্স পপআপ উইবলির জন্য

Weebly পেজে ফুটার কোড যোগ করুন

ধাপ 5 – Weebly পৃষ্ঠায় CSS লিঙ্ক করা

CSS ফাইলের সাথে লিঙ্ক করার জন্য "SEO সেটিংস> হেডার কোড" বিভাগে নীচের কোডটি যোগ করুন।

<link rel="stylesheet" type="text/css" href="/files/theme/video-popup.css"></link>

ধাপ 6 – HTML োকানো

স্ক্রিপ্ট এবং CSS সন্নিবেশ করার পরে পৃষ্ঠার বিষয়বস্তু এলাকায় ফিরে যান। একটি এম্বেড কোড এলিমেন্ট টেনে আনুন এবং নিচের HTML কোডটি োকান।

<!-- YouTube Popup as Button with Autoplay --> <div class="btn"> <a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a> </div> <!-- YouTube Popup as Button without Autoplay --> <div class="btn"><a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video without Autoplay as Text Link</a> </div> <!-- Vimeo Popup as Text Link with Autoplay --> <p> <a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a> </p> <!-- Vimeo Popup as Text Link without Autoplay --> <p> <a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a> </p> <!-- YouTube Video Linked with Image without Autoplay --> <div> <a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88576-613230c13b5c8.jpg" width="300" height="150"></a> </div>

ধাপ 7 – উইজেট কাস্টমাইজ করা

  • বাটন বা টেক্সট লিঙ্ক বা ইমেজ toোকানোর জন্য শুধুমাত্র HTML এর প্রয়োজনীয় ব্লক যুক্ত করুন।
  • ইমেজ ইউআরএল এবং ভিডিও ইউআরএল আপনার নিজের সাথে প্রতিস্থাপন করুন।
  • পপআপের সর্বোচ্চ প্রস্থ এবং উচ্চতা যথাক্রমে 680px এবং 480 px হিসাবে সংজ্ঞায়িত করা হয়েছে যা আপনি CSS এ কাস্টমাইজ করতে পারেন।
  • আমরা আপনাকে ব্যবহারকারীর ভাল অভিজ্ঞতা প্রদানের জন্য অটোপ্লে বিকল্প ছাড়াই ভিডিও পপআপ ব্যবহার করার পরামর্শ দিই। এছাড়াও স্পষ্টভাবে বর্ণনা করা নিশ্চিত করুন যে লিঙ্কে ক্লিক করলে একটি পপআপ খুলবে।
  • ব্রাউজারে পপআপ ব্লক করা পপআপকে ব্লক করে যা একটি নতুন উইন্ডোতে খোলে। এই ভিডিও পপআপ ব্রাউজারে ব্যবহারকারী অবরুদ্ধ পপআপ কাজ করবে ।
  • এই উইজেটটি jQuery ইউটিউব লাইটবক্স উইজেট থেকে রেফারেন্স করা হয়েছে এবং Weebly সাইটে অনুসারে পরিবর্তন করা হয়েছে। আপনি এটি অন্য কোন প্ল্যাটফর্মে ব্যবহার করতে পারেন।
  • আপনি এটি Weebly Pro HD ভিডিও প্লেয়ার এলিমেন্টের সাথে ব্যবহার করতে পারবেন না কারণ সেই উপাদানটি ব্যবহার করার সময় আপনি আপলোড করা ভিডিও URL পাবেন না। উইজেট উইল দরকারী, যতক্ষণ আপনার কাছে একটি ভিডিওর URL থাকে।

নীচে উইজেটটি কেমন দেখাবে, লাইটবক্স প্রভাব সহ পপ-আপ দেখতে লিঙ্কে ক্লিক করুন।



টেক্সট লিঙ্ক হিসাবে অটোপ্লে সহ ভিমিও ভিডিও


টেক্সট লিঙ্ক হিসাবে অটোপ্লে ছাড়া ভিমিও ভিডিও


ইউটিউব ভিডিও পপআপ দেখতে নিচের ছবিতে ক্লিক করুন।

ইউটিউব, ভিমিও ভিডিও লাইটবক্স পপআপ উইবলির জন্য

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত