The wmode attribute isn't functioning properly with flowplayer

I have a situation where I am using a flowplayer along with some div tags beneath it. Whenever a div tag is clicked, it should display another div tag, creating a dialog box effect on top of the page. However, the issue is that the flowplayer always stays on top of the div.

Even after trying to set the z-index of the div, it doesn't seem to work as expected.

Is there a specific method in flowplayer that can help reduce its z-index or allow my div to be placed above it?

I have also experimented with the wmode property for the flowplayer, but unfortunately, that didn't solve the problem either.

Below is the snippet of code I am currently working with:

<script type="text/javascript" src="/common/js/flowplayer-3.2.9.min.js"></script>
<a href="<?php echo $this->hotelVideoUrl; ?>"
   style="display:block;width:304px;height:208px; z-index: -1; position: relative;"
   id="player">
</a>

<script language="JavaScript">
    flowplayer("player", "/common/js/flowplayer-3.2.10.swf",{         
        clip:  {
            autoPlay: true,            
            autoBuffering: true            
        },
        wmode: 'opaque/transperent'
    });
</script>
jquerycssflowplayer

Answer №1

The instructions in the document suggest placing "wmode" as the second parameter, with an example like this:

flowplayer("player", {
    src:"http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",
    wmode: "opaque" // This allows the HTML to hide the flash content
    }, {
    clip: {
      url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'
    }
});

If you're attempting this in your scenario, you can try using the following code:

<script type="text/javascript" src="/common/js/flowplayer-3.2.9.min.js"></script>
<a href="<?php echo $this->hotelVideoUrl; ?>"
   style="display:block;width:304px;height:208px; z-index: -1; position: relative;"
   id="player">
</a>

<script language="JavaScript">
    flowplayer("player", {
        src : "/common/js/flowplayer-3.2.10.swf",
        wmode: 'opaque'}, {         
        clip:  {
            autoPlay: true,            
            autoBuffering: true            
        }
    });
</script>

With these adjustments, you should be able to successfully implement the changes. Feel free to update me on whether it works for you.

Answer №2

Simply include the following code snippet in your project:

wmode: "opaque"

Update: Your approach to integrating flow player seems quite unique compared to my usual method.

Take a look at this discussion as it could provide some valuable insights for you ...

Answer №3

Edit the given code below:

wmode: 'opaque/transparent'

Change it to

wmode: 'opaque' or wmode: 'transparent'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

creating a translucent jqm collapsible widget

Looking to make a jquery mobile collapsible element transparent. Attempted the following style, but it did not work: background-color: rgba(0, 0, 0, 0.6); Check out the Fiddle When I try this: background: #557700; filter: alpha(opacity=30); filter: pr ...

cssjquery-mobilestylesheet

Converting two adjacent columns in Bootstrap 5 into two rows on smaller screens: a step-by-step guide

I have recently started using Bootstrap for a project and I want to ensure that my application is responsive on various device screens including normal laptops, iPad Mini (768 X 1024), and iPad Air (820 X 1180). Below is a snippet of my HTML code: <div ...

htmlcssbootstrap-5

How to create the appearance of multiple line breaks using CSS

While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized. Check out the Fiddle and attempt to remove the <br/> tag. The challenge is to achieve the same effect (red div displayed) without resorting to this ra ...

javascripthtmlcss

Adding a button on its own line

Is there a way to append a button with a Bootstrap class in the same line? Currently, I have this line of code that adds data to a table after successful insertion into the server: $("#id_of_my_tr").before("<tr><td>" + name + "</td>< ...

jquery

Fieldset containing a table with a horizontal scrollbar

One issue I encountered in my application was dealing with a fieldset that contained table data with potentially many columns. To prevent the browser window from acquiring a horizontal scroll bar due to the wide table, I attempted to wrap the table in a c ...

htmlcssfirefox

Is it possible to maintain the x-axis in a fixed position while scrolling with d3.js?

I am working with a d3 matrix that has both an x and y-axis. However, my y-axis is quite long, so I want to ensure that the x-axis remains visible even when scrolling. I have tried setting the position attribute to 'fixed' using .style("position" ...

javascripthtmlcssd3.jssvg

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

javascriptjqueryhtmlajax

Eradicate the transit js functionality from the specified object

Recently, I've been experimenting with using Transit JS for animating thumbnails. While Transit JS is not a must-have for my project, I'm facing an issue where I can't figure out how to disable the animation calls on my div when needed. My ...

jquerytransition

What is the best way to manage the gradual disappearance of multiple divs belonging to the same class using jQuery?

I need help with a hover effect for 6 divs on a page. Each div has a layer on top that fades out on hover and fades back in on mouseleave. I currently have code for each individual div layer, but it's causing a stack overrun. How can I assign this fun ...

javascriptjquerycss

Display a div underneath a list item using JQuery

I need assistance with displaying each div individually on my list when the user hovers over and off of them. I also want the displayed div to slideUp upon exit. If you'd like to take a look, here is my code on http://jsfiddle.net/AZhgk/ <div id= ...

jqueryslidedownslideup

Creating a Gradient Effect for Partial Next Slide on Slick Slider using Bootstrap 4

I am currently designing a responsive carousel using Bootstrap-4 and slick.js. With the center-mode enabled, I noticed that it shows a partial next slide. I am interested in adding a gradient to this partial next-slide, but I am uncertain about how to acco ...

htmljquerycssbootstrap-4slick.js

Making changes to a list by adding or removing items, as well as adjusting the overall total

I'm in the process of creating a unique feature similar to a shopping cart, but instead of adding items to the cart, I'm adding them to a shortlist. My goal is to add the item to the shortlist, update the count on the shortlist, and then display ...

javascriptjqueryajaxcart

Stack two divs together

It may seem silly, but I just can't get it to work. I'm attempting to enclose two divs with different classes in another div, but my current code is automatically closing the divs. There are multiple sets of divs with classes .panel-heading and ...

javascriptjqueryhtml

Ways to verify the existence of empty arrays in an Object using underscore.js or jQuery

Is there a more efficient method to determine whether an object contains empty arrays (0-*) aside from the following approach: emptyArr: function() { var obj = getObj(); return obj.abc.length == 0 || obj.def.length == 0 || obj.ghi.length = ...

javascriptjqueryarraysunderscore.js

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

There seems to be an issue with the date picker opening automatically on IE10, while it works fine in Firefox where it only appears when you click on the associated text box. Does anyone have insight into why this might be happening specifically in IE10? ...

javascriptjqueryhtmlinternet-explorer

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

cssruby-on-railssasszurb-foundationmodularity

Drawing the table with the DataTable function is incredibly time-consuming

I have successfully integrated a client-side J Query Data table into my application. The Data table is initialized first and additional Rows are dynamically added via AJAX calls. The AJAX calls are made recursively until all data is fetched from the data ...

jqueryperformancedatatables-1.10

What is the best way to incorporate a fade in effect when a user clicks on a JavaScript dropdown menu?

I found a helpful code snippet on GitHub at this link which allowed me to easily create a dropdown menu. However, I wanted to add a Fade in and out effect when the menu is clicked. Here is my attempted implementation, but unfortunately, the fadeIn functi ...

javascriptjquerytransition

Discovering if a checkbox is checked using jQuery - a simple guide

Can anyone tell me an easy method to determine if a checkbox is checked using jQuery? Perhaps something similar to .checked or ischecked. ...

jquery

Retrieve the number of models from an ajax response that is returning a partial view

I am using ajax to call a method called Issues in the Issues controller. var url = "@(Url.Action("Issues", "Issues"))"; $.ajax({ type: 'POST', url: url, data: issue, dataType: "html", success: function (evt) { $(&apos ...

jqueryajaxasp.net-mvc