Any suggestions on resolving the issue of a white background in the Spotify embed code?

<iframe src="https://open.spotify.com/embed/track/6wsqVwoiVH2kde4k4KKAFU?utm_source=generator" width="500" height="100" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

In my NextJS 13.4 project, everything looks fine in light mode. However, when I switch to dark mode, a white background appears behind the song like this:

Background bug at spotify embed code

I have tried using CSS to fix this issue but to no avail. Any help would be greatly appreciated.

I was expecting the song container to have a transparent background.

cssnext.jsembedspotify

Answer №1

It is recommended not to customize the background color, as the player already has its own color for embedding.

For your situation, follow these steps:

  1. Adjust the height to 80 (152 and 352 are larger options).
  2. Include frameBorder="0" to eliminate white lines around the player.
  3. Apply 
    style="border-radius:12px"
    to remove sharp corners.

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

Best .htaccess configuration for optimizing Next.js static site generation

When exporting a static site using NextJS, the file structure includes: |-- index.html |-- article.html |-- tag.html |-- article | |-- somearticle.html | \-- anotherarticle.html \-- tag |-- tag1.html \-- tag2.html To hide the . ...

apache.htaccessmod-rewritenext.js

Creating a seamless integration of images and backgrounds using CSS

Can you help me find a way to blend the image with the background to eliminate the visible separation between them? Here is the link to the image: https://i.stack.imgur.com/VB9in.jpg ...

htmlcss

When resizing, the image and text exceed the limits of the div - Bootstrap 4

After diving into learning bootstrap, I decided to create a basic webpage summarizing F1 races. But alas, my layout got awfully mixed up! The image of the race driver and the text with the fastest lap driver's name are spilling out of their respective ...

htmlcssbootstrap-4

Spacing between a pair of jQuery datepicker panels

https://i.sstatic.net/Xnbh1.png Is there any way to add spacing between two tables inside the jquery date picker with a common header? I've tried various solutions like adding padding to the parent div, but haven't been able to fix it. Can anyon ...

htmlcssdatepicker

The data provided was deemed invalid with the message, "Requested quantity is unavailable," involving NextJS and Commerce JS

Hey there! I'm currently working on setting up an online store using CommerceJs and NextJS, but I've encountered an issue when processing payments. The error message I'm receiving is: "The given data was invalid." "type: unprocessable_entit ...

javascriptnext.jsstripe-payments

How do you use CSS to replace an HTML "rules" attribute?

When publishing to HTML using the DITA Open Toolkit, certain inline table attributes are automatically applied such as frame="border" and rules="all". I am facing an issue where I need to override the "rules" attribute for table cells using CSS styles. Wh ...

htmlcssditadita-ot

Animation of scrolling in a horizontal layout

Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to: <div class='layout horizontal'> < ...

htmlcssangularjspolymerpolymer-1.0

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

javascripthtmlcsscss-transitions

Error Encountered: TemplateSyntaxError on the User Profile Page

I encountered an error: TemplateSyntaxError at /accounts/profile/ <ExtendsNode: extends "registration/accounts/base.html"> must be the first tag in the template The content of base.html is as follows: {% load staticfiles %} <htm ...

pythonhtmlcssdjangobootstrap-4

JS Plugin Loading Problem

What combination of libraries/frameworks would work best for optimizing performance in an HTML5/CSS3/JS app with moving elements? I have done some research, but I am venturing into unfamiliar territory when it comes to performance. Are there key principles ...

javascriptangularjscsscordovawebgl

What are some techniques for styling a label element with an empty for attribute using CSS?

Here is what I currently have: <label class="filter-label" for="pv[]181"> ::before white <span class="count">5</span> ::after </label> My goal is to modify the ::after element within that label, but so far my attempts ...

css

Unnecessary list elements generated by dazzling navbarPage

While developing an app with shiny using navbarPage, I noticed that there are some unwanted li tags in the HTML that are not defined in my code. Could this be a known bug? How can I go about fixing it? <nav class="navbar navbar-default navbar-stati ...

htmlcssshiny

I am experiencing difficulties with the state updates, as they are not displaying my products correctly when I select them from

When updating the states setProductsShow and setSelectedCategories, it is important to note that setSelectedCategories is updated before setProductsShow. This sequence is crucial for rendering products correctly. I have come across numerous solutions rega ...

javascriptreactjsnext.js

Every third item is selected using a JQuery selector

Currently, I am tackling the task of working with PHP loops to generate multiple li elements within a single ul. The issue arises when I attempt to display every fourth li upon clicking one of the preceding three li. My current implementation only toggles ...

javascriptjquerycss

The issue of IE 6 not properly displaying a pop-up div with dynamic data when set to a width of 70%

I am trying to create a pop-up div with dynamic data that is centered on the screen. I have set the height to 300px, width to 70%, and enabled vertical scrolling. When viewing in IE7/IE8, the div appears as intended, centered on the screen with the specif ...

csshtmlinternet-explorer-6width

What could be causing my Next.js application to not function properly on Safari?

With my current project of developing a web app using nextjs, I'm encountering an issue specifically on Safari browser for Mac. Surprisingly, everything works perfectly fine on other browsers and even on iPhone. Upon opening the developer console, thi ...

javascriptiossafarinext.js

Trouble with CSS matching pattern - not functioning as expected

I am facing a requirement to customize the colors of ribbon styles instead of using the default ones. After researching pattern matching in CSS, I attempted the following code, but it did not work: This is my original CSS: .ms-cui-cg-**tl** .ms-cui-ct-f ...

css

Center an element on the screen by dynamically adjusting its position according to the media query

As I work on creating a responsive website that can adapt to screens of various devices, I am facing a challenge. Each device has a different number of pixels, making it difficult to centrally position a div dynamically. Currently, I am using margin-left: ...

htmlcsstwitter-bootstrap

Title slide on quarto featuring a captivating full coverage background image with a sleek row of icons at the bottom

I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I ha ...

cssrstudioquartoreveal.js

Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle. span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; ...

htmlcss