CODEWITHSUNDEEP
htmlcssvideobootstrap-4
Marcus Persson
Marcus Persson

Reputation: 383

Add border to responsive embedded video

I'm trying to add a border to a responsive embedded video.

I have tried two different approaches to show 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 have tried to add a border to both approaches, using:

a.

border:3px solid #EEE;

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

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

There is one consistent problem when adding the border, for all approaches: the video is either to big or too small for the space it is contained in. Either the video sort of zoomed in on, or it is too small such that there is a black borders appearing either vertically or horizontally depending on whether the width or height is too small. See image below.

enter image description here

I have tried to add magical values to get rid of the black border, like increasing outer-div's height padding a little, move the iframe by setting the left/right by some value and reducing it's size by some value (where all values are set to maintain the aspect ratio of the video). I would use this in worst case. The reason why I ask is because I hope there is a much smoother way to do it.

How can I add any-sized border to a responsive video without black borders appearing or the video being zoomed in on?

Upvotes: 1

Views: 3274

Answers (1)

Mike Jandreau
Mike Jandreau

Reputation: 432

If you have access to directly modify the HTML and CSS of your site, you could try adding a <div> around .embed-responsive and then add a border to that. As a general rule, it's a good idea to keep your HTML and CSS separate if you can.

A quick demo: https://codepen.io/mikejandreau/pen/jxNJmK

Add a wrapper <div> like so:

<div class="embed-border"><!-- add this guy -->
  <div class="embed-responsive">
    <iframe src="your-video"></iframe>
  </div>
</div><!-- close .embed-border -->

And add the CSS: 

/* extra div which gets the border */
.embed-border {
  border: 5px solid red;
  box-sizing: border-box; /* prevents extra width from being added */
}

/* 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%;
}

Upvotes: 3

Related Questions