Is it possible to make the background of the HTML Embed object transparent instead of grey?

I am currently utilizing Firefox along with an open-source plugin for video playback. The video is adjusted to fit the available space as defined by the width and height of the embed object, but occasionally a slight grey border appears on the right or bottom.

Changing the background color of the parent div does not seem to have any impact at all.

Here is the HTML code:

<div id="videoHolder" style="position: absolute; left: 50px; top: 50px; width: 300px; height: 150px;">
 <embed id="player" width="300" height="150" border="0" type="application/x-gbp" x-gbp-uri="">
</div>

Does anyone happen to know how to make an embed transparent? Adding wmode=transparent like with Flash does not seem to work...

Thank you, Frank

htmlcssfirefoxembedbrowser-plugin

Answer №1

It is not possible to make plugin elements transparent from the browser side in a universal way; plugins must have native support for transparency.

In the case of Flash, setting wmode="transparent" works because Flash has built-in functionality for transparency.

Answer №2

To improve the video display, consider adding the "wmode" attribute and setting its value to "opaque":

<div id="videoContainer" style="position: absolute; left: 20px; top: 20px; width: 400px; height: 200px;">
    <embed wmode="opaque" id="player1" width="400" height="200" border="0" type="application/x-nbc" x-nbc-uri="">
</div>

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

What are the steps for encoding a value using jquery serialize?

I attempted to encode all values using the following code: encodeURIComponent($("#customer_details").serialize()); Unfortunately, it did not produce the desired results. Is there a method to retrieve all elements on a form and individually encode each v ...

javascriptjqueryhtml

The jQuery code stops functioning once the identical HTML content is loaded through AJAX

Before you mark my question as a duplicate, I have already attempted the solutions provided by similar issues, but unfortunately none of them have resolved my problem. Here is my specific issue: I am working with a fragment that includes the following inpu ...

htmlajaxjqueryevent-handling

Can we add to the input field that is currently in focus?

Recently, I've been working on a bookmarklet project. My goal is to append an element to the currently focused input field. For instance, if a user clicks on a textarea and then activates my bookmarklet, I want to insert the text "Hello" into that sp ...

javascriptjqueryhtml

Rotating out of the element with the transform rotate effect

I have rotated the text by 270 degrees and now I am facing the challenge of aligning it within another div. Here is the original image before I rotated the text: Below is the code I used for the layout: #infoside { background-color: #00ff00; flo ...

htmlcssvertical-alignment

I'm looking to replicate the header design of the classic olx website. Is there anyone who can guide me on how to extend the search bar to match the original image?

Could use some help stretching my search input field to match the original picture. Any tips or suggestions on how to achieve this? I'm utilizing bootstrap and react.js for this project. Uploaded are the original image and my resulting image for compa ...

htmlcssinput

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...

htmlangularbootstrap-4

Utilizing CSS to dynamically update SVG icons within the navigation menu upon tab selection

Feeling frustrated and in need of assistance with my current issue. I am attempting to make a change - when I click on a tab in the menu, the default black SVG icon should be replaced by a white one. #menu a .main-menu-icon { display:inline-block; width:2 ...

csssvgmenucss-selectors

Showing local storage on a webpage using Jquery

I have encountered an issue where I can successfully add and remove items from local storage, but the added item does not display on my HTML page. The expected behavior is that when an item is added to local storage, it should be visible on a favorites pag ...

jqueryhtmllocal-storage

Creating eight equal sections within HTML <div> elements using Bootstrap

I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...

htmlcssangularbootstrap-5

When utilizing jQuery to add a <li> element, it suddenly vanishes

? http://jsfiddle.net/AGinther/Ysq4a/ I'm encountering an issue where, upon submitting input, a list item should be created with the content from the text field. Strangely, it briefly appears on my website but not on the fiddle, and no text is appen ...

javascriptjqueryajaxhtml

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

javascripthtml

What is the method for creating a beveled text effect using CSS?

Is there a CSS-only method to achieve a beveled text effect? https://i.sstatic.net/s4Wlw.png Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font ...

css

What exactly does original-title refer to in HTML coding?

I have been searching extensively, but I cannot find any information that explains the meaning and proper usage of the original-title in HTML code. I am unsure if original-title is a Tag or Attribute in HTML, and if it is the same as title? I came across ...

html

The visibility of overflow-y does not seem to be working properly when overflow-x is

https://i.sstatic.net/hihjC.png .iati-list-table { overflow-x: auto; overflow-y: visible; } When I apply overflow-visible, a scroll bar appears. But when I use overflowy-hidden, the tooltip is cropped. How can I set it so that overflow x is auto a ...

cssvue.js

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Is it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

javascripthtmlcssvue.jsvuejs2

From JSON object to HTML table: converting structured data into a user

I'm currently facing a challenge when trying to iterate through JSON data retrieved from an API and display it in an HTML table. After parsing the original JSON, I accessed its elements as follows: JSON (data retrieved from API): {"PrekesID" ...

javascripthtmljqueryjson

CSS will only be visible if it is enclosed within the <style> tag

While creating a view, I noticed that my CSS is not being displayed unless it's placed inside a <style> tag. I've tried using !important without success, as well as utilizing the selector .container-fluid > .row > .d-flex > .out_pr ...

cssbootstrap-4

If the image is not found, deactivate the anchor or hyperlink

I am encountering an issue where I have an image tag within an anchor element setup as shown below: <a href='$image'><img alt='No Image' src='$image'></a> When the image is not available, I can still intera ...

javascriptjqueryhtmlimageanchor

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

htmlcssflexbox