ইউটিউব ভিডিও এমফ্রেডের মাধ্যমে এম্বেড করা জেড-সূচক উপেক্ষা করছেন?

Question

আমি একটি অনুভূমিক মাল্টিলেভেল ড্রপডাউন নেভিগেশন মেনু বাস্তবায়নের চেষ্টা করছি। তাত্ক্ষণিকভাবে মেনুটির নীচে (উল্লম্বভাবে), আমি ইফ্রেমে এমবেডেড একটি ইউটিউব ভিডিও পেয়েছি। যদি আমি ফায়ারফক্সের মূল স্তরের একটি নাভ আইটেমের উপরে ঘোরাফেরা করি তবে ভিডিওর শীর্ষে ড্রপডাউন মেনুটি সঠিকভাবে উপস্থিত হবে ।

ক্রোম এবং আইই 9 তে তবে ড্রপডাউনটির কেবল একটি স্লাইভার আমার মেনু এবং আইফ্রেমের মধ্যে থাকা জায়গার ছোট্ট অঞ্চলে দৃশ্যমান। বাকিটা মনে হচ্ছে ইফ্রেমের পিছনে রয়েছে ।

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

• প্রশ্ন 1: ডাব্লুটিএফ?
• প্রশ্ন 2: কেন, আমি যদি স্পষ্ট করেও যদি z-index:-999 !important; ইফ্রামের উপর নজর রাখি তবে এই সমস্যাটি এখনও দেখা দেয়?

এমন কোনও অভ্যন্তরীণ সিএসএস রয়েছে যা ইউটিউব এম্বেড কোড অন্তর্ভুক্ত করে যা কোনওভাবে ওভাররাইডিং জিনিসগুলি?

Comments

আপনি কি কোনও লিঙ্ক পোস্ট করতে পারেন - কোড ছাড়াই সহায়ক প্রতিক্রিয়া দেওয়া কঠিন difficult

— খুবমানিয়াইমাইলস

জেড-ইনডেক্স এবং আইফ্রেমের

— স্টেফানফ্রিডরিচ

আই এস <9

— স্যাম্পসন

ভাবছি 2015 সালে কীভাবে এই কাজ কেউ জন্য, <embed wmode="transparent" ...>অধ্যায় আপনার প্রয়োজন হয় এবং wmode সেটিংগুলি সম্পর্কে চিন্তা করতে কোন প্রয়োজন (Firefox অন্তত) url'র param' এর বা iframes

— RozzA

মনে রাখবেন যে কোনও কারণে দুটি ভিন্ন ধরণের ইউটিউব লিঙ্ক রয়েছে: youtube.com/v/video_id এবং youtube.com/e એમ્બેડ / video_id । ভি-লিঙ্কটি আই-তে জেড-সূচকে উপেক্ষা করে তবে এম্বেডটি ঠিকঠাক কাজ করে।

— আন্তন লাহিন

Answer 1

Wmode যুক্ত করার চেষ্টা করুন, এটি দুটি পরামিতি বলে মনে হচ্ছে।

&wmode=Opaque

&wmode=transparent

এটি কাজ করে কেন এমন প্রযুক্তিগত কারণ বা আরও অনেক ব্যাখ্যা আমি খুঁজে পাচ্ছি না তবে এই ক্যোয়ারীর দিকে নজর দিন ।

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

অথবা এটা

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Comments

(আমি ওপি) সবাইকে ধন্যবাদ! আমি একটি অনুরূপ সমাধান এ উপর পদস্খলিত manisheriar.com/blog/flash_objects_and_z_index কী উভয় নাম = "wmode" মান = একটি <PARAM> এ "স্বচ্ছ" ব্যবহার হবে বলে মনে হয় এবং wmode = "স্বচ্ছ" <এম্বেড> উপর। আমি সন্দেহ হিসাবে, এটি একটি iframe সমস্যা নয়। যদি আপনি এটিকে স্বচ্ছ হতে বাধ্য না করেন তবে এটি সর্বাধিক জেড-সূচী চাইলে (দাবি?) ফ্ল্যাশ হওয়া কোনও সমস্যা বলে মনে হচ্ছে।

— ব্যবহারকারী 249493

আপনি যদি আইফ্রেমে জেএস এপিআই ব্যবহার করে থাকেন তবে প্লেয়ারওয়ার wmodeএটি ডকুমেন্টেড না থাকলেও কাজ করে।

— রিচার্ড এম

আমি এটি একীভূত করেছি এবং আমার অভিনব বাক্স স্টিল ie7 / 8 এ কাজ করে না এবং আমি এখনও ভিডিওটি শীর্ষে পেতে পারি। encompasscu.com.au/homeiswhereTheheartis আমি কি করতে পারি

— ড্যান

? Wmode = স্বচ্ছ বিকল্পটি আমার জন্য কবজির মতো কাজ করেছে। আমি কেবল চাই যে আমি জিজ্ঞাসা করার জন্য সঠিক প্রশ্নটি দ্রুত করতে পেরেছি। 24 ঘন্টা পরে আমি সন্ধান শুরু করি আমি এই উত্তরটি পেয়েছি। উপরের উত্তরটি ও পোস্ট করার জন্য ধন্যবাদও!

— djmarquette

@ ড্যান, আমার সম্পাদনা দেখুন ... আপনার ইউটিউব এম্বেড কোডটিতে ইতিমধ্যে আপনার কাছে একটি কোয়েরি স্ট্রিং থাকতে পারে। (পছন্দসই ভিডিওগুলি না দেখানোর জন্য? rel = 0) যদি সে ক্ষেত্রে & wmode = স্বচ্ছ ব্যবহার (বা অস্বচ্ছ - আমি শুনেছি যে অস্বচ্ছ কম সিস্টেম সংস্থান ব্যবহার করে, তাই আমি মূলত এটি ব্যবহার করি, যদি না আমার এটিকে স্বচ্ছ করার কারণ থাকে)।

— শান কেন্ডল

Answer 2

জোশকের উত্তরটি সঠিক ট্র্যাকটিতে ছিল, কিন্তু আমি দেখতে পেয়েছি এটি সম্পূর্ণভাবে ?rel=0ক্যোরিস্ট্রিং মুছে ফেলে এবং ?wmode=transparentআইটেমটির সাথে এটি প্রতিস্থাপন করে - যা প্লেব্যাকের শেষে ইউটিউব প্রস্তাবিত ভিডিও তালিকা প্রদর্শন করার প্রভাব ফেলেছে, যদিও আপনি প্রাথমিকভাবে করেন নি ' এটি ঘটুক তা চাই না।

আমি কোডটি পরিবর্তন করেছি যাতে srcএম্বেড করা ভিডিওটির বৈশিষ্ট্যটি আগে স্ক্যান করা হয়, ?এটিতে ইতিমধ্যে কোনও প্রশ্ন চিহ্ন রয়েছে কিনা তা দেখার জন্য (কারণ এটি প্রাক-বিদ্যমান ক্যোরিয় স্ট্রিংয়ের উপস্থিতি বোঝায়, যা তাত্ত্বিকভাবে কিছু হতে পারে ?rel=0তবে তাত্ত্বিকভাবে হতে পারে ইউটিউব ভবিষ্যতে সংযোজন করতে বেছে নিন এমন কিছু হোন)। যদি ইতিমধ্যে সেখানে কোনও ক্যোরিয় স্ট্রিং থাকে, আমরা এটি সংরক্ষণ করতে চাই, এটি ধ্বংস করতে চাই না, কারণ এটি এই ইউটিউব ভিডিওতে যাঁরা পেস্ট করেছেন তার দ্বারা নির্বাচিত একটি সেটিংসের প্রতিনিধিত্ব করে এবং তারা সম্ভবত কোনও কারণে এটি বেছে নিয়েছিল!

সুতরাং, যদি ?পাওয়া যায় wmode=transparentতবে বিন্যাসটি ব্যবহার করে সংযুক্ত করা হবে: &mode=transparentপ্রাক-বিদ্যমান ক্যোয়ারী স্ট্রিংয়ের শেষে এটি ট্যাগ করার জন্য।

যদি কোনও ?সন্ধান না পাওয়া যায়, তবে কোডটি URL এর ঠিক নতুন কোয়েরি স্ট্রিং হিসাবে সংযোজন করে মূলত ( খুবম্যান্যায়াইমাইলসের পোস্টে) ঠিক ঠিক তেমনভাবে কাজ করবে ?wmode=transparent।

ইতিমধ্যে, ইউআরএল ইউআরএল শেষে ইতিমধ্যে কিউরি স্ট্রিং হিসাবে কী থাকতে পারে বা না পারে তা নির্বিশেষে এটি সংরক্ষণ করা হয় এবং প্রয়োজনীয় wmodeপ্যারামিটারগুলি আগে যা ছিল তাতে ক্ষতি না করে ইনজেকশন দেওয়া বা যুক্ত করা হয়।

আপনার document.readyফাংশনটিতে নামার কোড এখানে রয়েছে :

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

Comments

এটি আমার পক্ষে কাজ করেছিল যেখানে স্বীকৃত উত্তরটি দেয় নি (কোড ঠিক করার পরেও)। ড্রপ-ইন ঠিক করার জন্য ধন্যবাদ।

— টম

? প্যারামিটার ক্যোয়ারী স্ট্রিং শুরু হয় এবং এটিই হ'ল সীমানা। মৌলিক উপাদান. দেখুন stackoverflow.com/questions/2667551/...

— cdonner

এটি ছেড়ে দেওয়ার আগে আমার সমস্যাটি 10 ​​সেকেন্ড স্থির করে!

— মালিবুর

পারফেক্ট! আমি যুগে যুগে এটি খুঁজছিলাম!

— জেরোয়েন ডাব্লু

এটি opaqueনয় Opaque(

— কেসটি

Answer 3

এসসিআর ইউআরএলে এই দুটির মধ্যে একটি যোগ করুন:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Answer 4

ইউটিউবে আমার একই সমস্যা রয়েছে যদি তবে ইন্টারনেট এক্সপ্লোরারে এমফ্রেড এম্বেড থাকে।

জেড-ইনডেক্স পুরোপুরি উপেক্ষা করা হচ্ছে, বা ফ্ল্যাশ ভিডিওটি সর্বাধিক সর্বোচ্চ সূচকে প্রদর্শিত হচ্ছে।

এটি আমি ব্যবহার করলাম, উপরের জিকোরি স্ক্রিপ্টটি সামান্য মানিয়েছিলাম।

আমার এম্বেড কোডটি সরাসরি ইউটিউব থেকে ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

JQuery সামান্য উপরের উত্তর থেকে অভিযোজিত ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

মূলত আপনি যদি ভিডিওটি আপনার এম্বেড সেটিংসে শেষ করেন তখন প্রস্তাবিত ভিডিওগুলি দেখান না ?rel=0, আপনার "src"ইউআরএল শেষে আপনার একটি থাকে । সুতরাং আমি ?rel=0উপস্থিত প্রতিস্থাপন বিট যোগ করেছি । অন্যথায় ?wmode=transparentকাজ করবে না।

Answer 5

আমরা কেবল ?wmode=transparentইউটিউব ইউআরএল এর শেষে যোগ করতে পারেন । এটি ইউটিউবকে ভিডিওটি wmode সেট সহ অন্তর্ভুক্ত করতে বলবে। সুতরাং আপনার নতুন এম্বেড কোডটি দেখতে এমন হবে: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Comments

এটি ইতিমধ্যে এখানে অনেক উত্তরে প্রস্তাবিত হয়েছিল অন্য কোনও উত্তর দিয়ে এর পুনরাবৃত্তি করার প্রয়োজন নেই। আপনার যুক্ত করতে নতুন কিছু থাকলে দয়া করে করুন, অন্যথায় দয়া করে অন্যরা ইতিমধ্যে যা পোস্ট করেছে তার পুনরাবৃত্তি করবেন না।

— শ্যাডো উইজার্ড আপনার জন্য কান ইয়ার

Answer 6

এই একজনই আমার পক্ষে কাজ করেছেন:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

আমি এটি footer.php ওয়ার্ডপ্রেস ফাইল এ লোড। কোডটি এখানে মন্তব্যে পাওয়া গেছে (ধন্যবাদ জারসন)

Answer 7

আমার জিজ্ঞাসার স্ট্রিংয়ের শুরুতে wmode = অস্বচ্ছ বা স্বচ্ছ কোনও কিছুই সমাধান করতে পারেনি। আমার জন্য এই সমস্যাটি কেবল ক্রোমে দেখা যায়, এমনকি সমস্ত কম্পিউটারেও নয়। মাত্র একটি সিপিইউ। এটি ভিমেওতেও এম্বেড হয় এবং সম্ভবত অন্যরাও ঘটে।

আমি যে বুটস্ট্র্যাপ মডেলগুলি ব্যবহার করছি তার 'দেখানো' এবং 'লুকানো' ইভেন্টের সাথে সংযুক্ত করার জন্য আমার সমাধানটি ক্লাস যুক্ত করুন যা আইফ্রেমে 1x1 পিক্সেল সেট করে এবং মোডালটি বন্ধ হয়ে গেলে ক্লাসটি সরিয়ে দেয়। দেখে মনে হচ্ছে এটি কার্যকর হয় এবং এটি কার্যকর করা সহজ।

Answer 8

নীচের উত্তরগুলি আমার পক্ষে সত্যিই কার্যকর হয়নি, আমার মোড়কে একটি ক্লিক ইভেন্ট ছিল এবং 7,৮,৯,১০ জেড-ইনডেক্সকে উপেক্ষা করেছে, সুতরাং আমার ফিক্সটি মোড়কে একটি পটভূমির রঙ দিচ্ছিল এবং এটি হঠাৎ কাজ করেছিল । যদিও এটি স্বচ্ছ বলে মনে করা হয়েছিল, তাই আমি পটভূমির রঙের সাদা রঙের সাথে মোড়কটি সংজ্ঞায়িত করেছি এবং তারপরে অস্বচ্ছতা 0.01, এবং এখন এটি কাজ করে। আমার উপরের ফাংশনগুলিও রয়েছে তাই এটি একটি সংমিশ্রণ হতে পারে।

আমি জানি না কেন এটি কাজ করে, আমি কেবল এটি খুশি করি।

Answer 9

বিগজ্যাকোর জাভাস্ক্রিপ্ট কোডটি আমার পক্ষে কাজ করেছিল, তবে আমার ক্ষেত্রে আমাকে প্রথমে কিছু জিক্যুরি "নোকনফ্লিক্ট" কোড যুক্ত করতে হয়েছিল। আমার সাইটে কাজ করা সংশোধিত সংস্করণটি এখানে:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Answer 10

আইফ্রেমে আপনার যা যা প্রয়োজন তা হ'ল:

...wmode="opaque"></iframe>

এবং ইউআরএল:

http://www.youtube.com/embed/123?wmode=transparent