ইউটিউব iframe উপর ওভারলে অস্বচ্ছ ডিভ

Question

আমি কীভাবে ইউটিউব ইফ্রেমে এম্বেড থাকা ভিডিওর উপর আধা-স্বচ্ছ অস্বচ্ছতার সাথে একটি ডিভকে ওভারলে করতে পারি?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

সিএসএস

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

সম্পাদনা করুন (আরও ব্যাখ্যা যুক্ত করা হয়েছে): এইচটিএমএল 5 আরও বেশি সংখ্যক ডিভাইস নিয়ে ফ্ল্যাশের পরিবর্তে এটি ব্যবহার করে যা ইউটিউব ভিডিও এম্বেডিংকে জটিল করে তোলে, ধন্যবাদ ইউটিউব একটি বিশেষ এমবেডেবল আইফ্রেম সরবরাহ করে যা সামঞ্জস্যতা সহ সমস্ত ভিডিও এম্বেড করে, তবে এখন অর্ধ-স্বচ্ছ ডিভ দিয়ে কোনও ভিডিও অবজেক্টকে ওভারলে করার পূর্বের কার্য পদ্ধতিটি এখন আর বৈধ নয়, আমি এখন <param name="wmode" value="transparent">অবজেক্টটিতে একটি যুক্ত করতে অক্ষম , কারণ এটি এখন একটি আইফ্রেম, সুতরাং আমি কীভাবে উপরে একটি অস্বচ্ছ ডিভ যুক্ত করব? এম্বেড ভিডিও ইফরামের?

Comments

দেখে মনে হচ্ছে ইউটিউব বিষয়টি পুরোপুরি ঠিক করে দিয়েছে।

— টিমো হুভিনেন

আমি ক্রোমে এখনও সমস্যাটি দেখতে পাচ্ছি।

— স্ক্রিবু

@ স্ক্রিবু এটি ফ্ল্যাশ সুরক্ষার সমস্যা হতে পারে বা আমি কিছু মিস করছি, আমি একটি স্থানীয় সার্ভারে পরীক্ষা করেছি।

— টিমো হুভিনেন

সম্ভবত। যাইহোক, আনাতালিয়োকস এর সমাধান আমার পক্ষে কাজ করেছিল।

— স্ক্রিবু

আপনি এই প্রশ্নে ইউটিউব ট্যাগ যুক্ত করতে পারেন?

— anataliocs

Answer 1

এই সমস্যা সম্পর্কে অফিসিয়াল অ্যাডোব সাইট থেকে তথ্য

আপনি যখন কোনও ইউটিউব লিঙ্ক এম্বেড করবেন তখন বিষয়টি হ'ল:

https://www.youtube.com/embed/kRvL6K8SEgY

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

আপনার ইউআরএলে এই জিইটি প্যারামিটার যুক্ত করার চেষ্টা করুন:

wmode = অস্বচ্ছ

তাই ভালো:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

ইউআরএল এটির প্রথম পরামিতি নিশ্চিত করুন। অন্যান্য পরামিতি অবশ্যই অনুসরণ করা উচিত

আইফ্রেমে ট্যাগে:

উদাহরণ:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Comments

সমস্যা সম্পর্কে অ্যাডোব থেকে তথ্য: http://kb2.adobe.com/cps/155/tn_15523.html । শুধু মাত্র নথির জন্য.

— ওয়াসেক

Answer 2

মনে রাখবেন যে ডাব্লুএমড = স্বচ্ছ ফিক্স কেবল তখনই কাজ করে যদি

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

না

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Answer 3

হুম ... এবার কী আলাদা? http://jsfiddle.net/fdsaP/2/

Chrome এ রেন্ডার্স জরিমানা। আপনার এটি ক্রস ব্রাউজারের দরকার? এটি সত্যই সুনির্দিষ্ট হতে সহায়তা করে।

সম্পাদনা : ইউটিউব এগুলিকে রেন্ডার করে objectএবং embedস্পষ্টত কোনও ওয়মোড সেট নেই, যার অর্থ এটি "উইন্ডো" -এ ডিফল্ট হয় যার অর্থ এটি সমস্ত কিছুকে ওভারল করে । আপনার প্রয়োজন হয়:

ক) যে পৃষ্ঠাটি নিজে অবজেক্ট / এম্বেড কোড রয়েছে সেটিকে হোস্ট করুন এবং যদি আপনি উভয় উপাদান পরিবেশন করা বেছে নেন তবে এম্বেড করার জন্য wmode = "স্বচ্ছ" প্যারাম উপাদান যুক্ত করুন

খ) ইউটিউবকে সেগুলি নির্দিষ্ট করার জন্য একটি উপায় সন্ধান করুন।

Comments

হ্যাঁ, আমি সমস্যাটি কী ছিল তা জানতে পেরেছিলাম, ফায়ারফক্স এবং ক্রোমে এটি সাধারণ ব্যাকগ্রাউন্ডের সাথে কাজ করে, অস্বচ্ছতা যুক্ত করে এটি এর মধ্য দিয়ে জ্বলজ্বল করে তোলে ... আপনার মধ্যেও এটি জ্বলজ্বল করে।

— টিমো হুভিনেন

আমার দেখায় এমনভাবে দেখতে iframe উদাহরণ সম্পাদনা করা। jsfiddle.net/fdsaP/6

— টিমো হুভিনেন

সুতরাং ... আপনি যদি চান না তবে অস্বচ্ছতা যদি আইফ্রেমের ভিতরে অবজেক্ট / এম্বেড উপাদানটিতে প্রয়োগ করতে চান?

— মধ্যস্থতা ওমুরিলিভ

হ্যাঁ, আমি লক্ষ্য করিনি যে আইফ্রেমটি ওভারলেড হয়েছে কারণ আমার জন্য বিষয়টি পুরো আইফ্রেমটি coveringেকে দিচ্ছে, আমার যদি সম্ভব হয় তবে ভিডিওটি কভার করা দরকার, অন্যথায় খারাপভাবে একই প্রস্থ / উচ্চতা এবং অবস্থানের কালো ডিভ দিয়ে প্রতিস্থাপন করতে হবে।

— টিমো হুভিনেন

লিঙ্ক এবং সমাধানের জন্য @ মিডার ধন্যবাদ! এখনই এটি চেষ্টা করে দেখুন, তবে ফ্ল্যাশটি এখনও ক্লিক-সক্ষম রয়েছে :)

— টিমো হুভিনেন

Answer 4

Anataliocs টিপ খুঁজে পাওয়ার আগে আমি সিএসএসের সাথে জগাখিচুড়ে একটি দিন কাটিয়েছি। wmode=transparentইউটিউব ইউআরএলে একটি প্যারামিটার হিসাবে যুক্ত করুন :

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

এটি iframe এর ধারকটির জেড-সূচকটি উত্তরাধিকারী করার অনুমতি দেয় যাতে আপনার অস্বচ্ছ ইফ্রেমের <div>সামনে থাকে।

Answer 5

নান্দনিক উদ্দেশ্যে অস্বচ্ছ ওভারলে কি?

যদি তা হয় তবে আপনি ব্যবহার করতে পারেন:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'পয়েন্টার-ইভেন্টস: কিছুই নয়' ওভারলে আচরণটি পরিবর্তন করবে যাতে এটি শারীরিকভাবে অস্বচ্ছ হতে পারে। অবশ্যই, এটি কেবল ভাল ব্রাউজারগুলিতেই কাজ করবে।

Comments

সাফারি 4, ক্রোম এবং ফায়ারফক্স 3.6 এখনও ক্লিক করে ??

— টিমো হুভিনেন

আপনি যে ওয়াট চান না?

— কোডবিফ

আমি সম্পূর্ণ নান্দনিক উদ্দেশ্যে ইউটিউব এম্বেড করা ভিডিওটিকে অস্বচ্ছ ব্যাকগ্রাউন্ডের পিছনে রাখার চেষ্টা করছি :)

— টিমো হুভিনেন