Enhance the appearance of your responsive embedded video with a stylish border

I'm attempting to give a decorative border to a flexible embedded video.

I've experimented with two different techniques to display the video:

1.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe>
</div>

2.

<div style="position: relative; width: 100%; padding-bottom: 56.25%;" class="text-center">
    <iframe allowfullscreen="" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%"></iframe>
</div>

I've attempted to add a border to both methods, using:

a.

border:3px solid #EEE;

b. (variations of the below e.g. different width/height values etc, and where the parent div had a background color, which matches the border color)

<iframe style="left: 5px; top: 5px; width: 100%; height: 100% ... >...</iframe>

There is a consistent issue when applying the border, for all methods: the video either appears too enlarged or too compressed within the space it occupies. Sometimes the video is zoomed in, or it ends up too small causing black borders to appear either vertically or horizontally based on whether the width or height is insufficient. Check the image below for reference.

https://i.sstatic.net/G9rrB.jpg

I've tried adjusting various values in an attempt to eliminate the black border, like slightly increasing the outer-div's height padding, shifting the iframe by adjusting the left/right values, and reducing its size with aspect ratio intact. However, I am hoping for a simpler solution.

Is there a way to add a border of any size to a responsive video without encountering black borders or the need for zooming adjustments?

htmlcssvideobootstrap-4

Answer №1

To customize the appearance of your site, consider enclosing the .embed-responsive in a <div> and applying a border to that. It is generally recommended to maintain a separation between your HTML and CSS whenever possible.

Here is a simple demonstration: https://codepen.io/mikejandreau/pen/jxNJmK

Create a wrapper <div> as shown below:

<div class="embed-border"><!-- Add this container -->
  <div class="embed-responsive">
    <iframe src="your-video"></iframe>
  </div>
</div><!-- Close .embed-border -->

Then, add the following CSS: 

/* Additional div with border */
.embed-border {
  border: 5px solid red;
  box-sizing: border-box; /* Prevents additional width */
}

/* Aspect ratio and positioning for responsive video */
.embed-responsive {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

javascriptjqueryhtmlmodal-dialogsemantic-ui

Dynamic text input and selection menu with AJAX (PHP and JavaScript)

As a student who is new to Javascript and PHP, I am trying to create a login page for my website that can verify user input in the database using AJAX. For example, when a user enters their username and password, the system should automatically check if t ...

javascriptphphtmlajax

Revamped Web Presentation: The Dynamic Blend

I'm struggling to arrange a section in the same way as shown in this image. https://i.stack.imgur.com/QVDHn.png I have been using bootstrap 4 and have experimented with rows and columns, but haven't been able to achieve the desired layout. Curr ...

htmltwitter-bootstrapbootstrap-4layouthtml-lists

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

javascriptphpjqueryhtmlobject

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can ...

cssvue.jswebpackvuetify.js

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...

htmlcsslayoutwordpress

Grails Error: Cannot find method signature for org.apache.catalina.core.ApplicationHttpRequest.getFile()

Every time I try to access the upload page of my Grails application, I encounter this error message: No signature of method: org.apache.catalina.core.ApplicationHttpRequest.getFile() is applicable for argument types: (java.lang.String) values: [file] ...

htmlgrailsgroovyuploading

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

javascriptphphtmlcss

Margin ambiguity in a vue.js application

I am facing an issue with my Vue.JS project setup. I want the App.vue to occupy the entire page and have different routes displayed within App.vue using router-view. But, when I try to add a margin to the content of my Game component, the margin seems to ...

javascripthtmlcssvue.jsvuejs2

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

I am struggling with my code which has unnecessary information. <div> <div id="one" class="button"></div> <div id="two" class="button"></div> </div> <div> <div class="Home tab"> < ...

javascriptjqueryhtmlcss

Guide on executing edit form alongside file upload

Is there a way to update a form without having to upload a new image? I have successfully implemented multer for image uploads when creating a form. My frontend is built using ReactJS and the backend server side is Node.js. This is the front end code usi ...

htmlnode.jsreactjspostgresqlreact-router

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

On my page, I utilize the getStaticProps function to fetch a list of objects containing book titles, authors, and character lists. Each object is then displayed within a component that formats them into attractive pill-shaped elements. The component rende ...

htmlreactjsnext.js

What could be the reason for the page scrolling upwards when clicking on href="#"?

I am encountering an issue with a hyperlink <a href="#" id="someID">Link</a> that is located further down the page. This link is used to trigger an Ajax request, but whenever it is clicked, the page automatically scrolls back to the top. I have ...

javascripthtmlajax

How to show specific images by clicking on particular items in Ionic 3 on a separate page

Can someone assist me with displaying specific images from a slider gallery? I am struggling to figure out how to show only the January edition when clicking on it in eighteen.html, while hiding the February and March editions. It has been 2 days of unsucc ...

htmltypescriptionic-framework

Unlocking the attributes of Angular form elements: A guide

Imagine we have a form like this <form name="myForm" data-ng-controller="Ctrl"> <input name="input" data-ng-model="userType" data-description="User Type" required> </form> When working in the controller, we can refer to the input el ...

javascripthtmlangularjs

Tips for achieving a unique look with CSS: Transforming border radius colors in four distinct sections

Is it possible to create a gradient border with multiple colors using border radius? div { border-radius: 30px; width: 60px; height: 60px; border: 1px red solid } Hello <div> </div> I am looking to achieve a unique effect on my bord ...

cssborder

Displaying a loading screen while a jQuery ajax request is in progress

Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome. In my present code, everything functions properly o ...

javascriptjqueryhtmlcssajax

What is the best way to end a table row after every group of four items?

I am working with a Handlebars template to display an array of movies in a table with four columns. Currently, I have set up a HBS helper in my code: app.engine('handlebars',exphbs({ defaultLayout: 'main', helpers: { n ...

javascripthtmlnode.jsexpresshandlebars.js

Display the current date on a webpage using a Google calendar integration

I am struggling to display only today's events in my HTML output using this code. When I remove the line "if ($date = date("Y-m-d")){", the code shows a specific number of events. How can I modify the code to show all events that occur on a single day ...

phphtmldatecalendar

What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html: <body> <div> <img src="img/projec ...

htmlcss