Using Bootstrap to embed YouTube videos results in a sleek, modern design with distinctive black

When my screen is maximized on Chrome, I notice irritating black lines appearing on my responsive Youtube embeds. Unfortunately, I am unable to post an image due to lack of reputation.

Specifically, when the video is paused, there is a slim black line at the bottom, and while playing, a slightly thicker line appears on the left side.

I have implemented the responsive code provided by Bootstrap:

<div class="row">
   <div class="col-lg-8">
      <div class="embed-responsive embed-responsive-16by9">
         <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jO7UfFyGrdk?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
      </div>
   </div>
</div>

This issue is frustrating as I aim for a clean white background in my videos to match the overall look of my website.

htmlcsstwitter-bootstrapyoutube

Answer №1

I recently encountered an issue with my responsive container div where I needed to add clip-path: inset(1px 1px); Unfortunately, this solution works well for most newer browsers except for Edge. This was the only workaround I could find to eliminate the black lines appearing on the thumbnail.

.embed-container iframe, .embed-container object, .embed-container embed
{ 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(1px 1px);
}

Answer №2

Encountering a similar issue led me to make a switch from using an "iframe" to "video". Below is the code snippet I implemented...

<div class="embed-responsive embed-responsive-16by9">
    <video class="embed-responsive-item" src="videos/sampleVideo.mp4" type="video/mp4" allowfullscreen controls></video>
</div>

REMINDER: Ensure that you include 'autoplay' or 'controls' to avoid having a non-functional video.

Trust this solution proves beneficial!

Answer №3

My solution involved the following workaround:

video, iframe{
    opacity: .99;
}

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

Selenium Timeout Error: Locator Not Found

Once again, I am struggling with the locator and trying to figure out the correct syntax and code. Here is the code I was attempting to execute: wait.until(EC.presence_of_element_located((By.XPATH, "//div[@class='col-xs-6']//input[@class=&a ...

pythonhtmlseleniumselenium-webdriverinput

The Jquery click event is not triggering when clicked from a hyperlink reference

I have a specific HTML href in my code snippet: <a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a> Upon clicking this link, a waiting box is displayed on the page. However, I don't ...

javascriptjqueryhtml

Adjusting data points on a radar chart.js through user interaction

I have a radar map generated using chart.js, along with some input fields where users can enter values that I want to reflect in the graph. I am exploring ways to update the chart dynamically as the user types in the values. One option is to have the char ...

javascripthtmlinputchart.jsradar-chart

What is the simplest method to transfer a variable from an HTML file to a Python script?

Can someone show me the simplest method to pass a variable from HTML to Python? I'm using the "input" tag to get the variable, and I only need to send it to my Python script without any response back to the HTML. Appreciate your help! ...

pythonhtmlvariables

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by thes ...

javascripthtmlcsshighcharts

Animations and transitions for cards

import Section from '@/components/section' import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react"; import { CSSProperties, useState } from 'react'; const Index = () => { c ...

cssreactjsnext.jsjsxprogressive-web-apps

Adjust div height to match the dynamic height of an image using jQuery

I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...

javascriptjqueryimagecss

A guide on integrating variables into a MySQL table using PHP

I am currently working on a project where users should be able to select their schedule. Here is the code that I have written so far: <?php //if form has been submitted process it if(isset($_POST['submit'])){ $servername = "localhost"; ...

phphtmlmysql

Library of User Interface components for React Native applications

As I embark on my journey of building my first major app using React Native, a question comes to mind. Is there a UI framework available for React Native that offers pre-styled components right out of the box? Similar to how Ionic provides a base theme a ...

javascriptcssuser-interfaceionic-frameworkreact-native

How come e.target.value always shows the most recent value?

Starting out in HTML and I have a question regarding input. Here is the HTML code I am working with: <input type="text" value="abc" onChange={(e) => { console.log(e.target.value); }}/> I am puzzled because even though the default v ...

htmldom-events

Create an unordered Vue component object

In the data retrieved from the backend, there is an object containing various properties, one of which is the 'average' value. This object is ordered based on that value and when accessed through Postman, it appears as follows: ranking: ...

javascripthtmlvue.js

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

javascriptjqueryhtmlarraysjson

Ways to create gaps among the links in the Bootstrap 4 navigation bar?

I recently put together a Bootstrap 4 navbar and now I'm looking to increase the spacing between the items on the right side of the navbar. <nav id="menu" class="navbar navbar-expand-md sticky-top"> <div class="site-branding navbar-brand c ...

htmlcssbootstrap-4

Issue with SideNav function in MaterializeCss following recent update

After updating the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8, I noticed that my SideNav isn't functioning correctly anymore. When I try to click on the menu, it slides out but the dark overlay covers the entire sc ...

javascripthtmlcssmaterialize

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

jqueryhtmlcsstwitter-bootstrapjquery-animate

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

javascripthtmlcssflexbox

Utilizing Cookies within an HTML Page

My current code is functioning perfectly, accurately calculating the yearly income based on the input "textmoney." I have a link to a more advanced calculator for a precise prediction. My goal is to find a way for the website to retain the data input from ...

javascriptjqueryhtmlcookiescalculator

Customize Typography style variations in Material-UI version 5

I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...

cssmaterial-ui

"Running experiments with Google Ads and Google Analytics scripts results in a blank page being displayed

Currently, I am working on a plain HTML file and conducting tests to ensure that the Google Ads and Analytics scripts are functioning correctly before implementing them on other pages. A colleague who has an AdSense account provided me with the script code ...

javascripthtmlgoogle-analyticsads

How can I set the input tag to reset back to 1 when a certain event occurs?

I am currently developing an HTML Snakes And Ladders game. On the settings screen, there is an input field where users can select the size of the board. Depending on their choice, they will be able to choose a maximum number of snakes and ladders. For exa ...

javascriptjqueryhtmlajax