CODEWITHSUNDEEP
csshtmliframe
dark_illusion_909099
dark_illusion_909099

Reputation: 1099

Remove iframe border

I am using HTML 5 to add a video on to my webpage, with the use of iframe. Once I add the video it looks like this below:

enter image description here

As you can see the black borders around the video, is there anyway I can remove that bit and maybe stretch the video across to match up with the width of the page?

This is what I have done for displaying the video :

<div><iframe src="assets/videos/example.mp4" type="video/mp4" frameBorder="0" width="1280" height="720" allowfullscreen ></iframe></div>

Upvotes: 1

Views: 6546

Answers (2)

frnt
frnt

Reputation: 8795

Remove width and height from iframe and declare it's height and width in CSS. To match-up with width of your div or browser use width:100%; Add This,

HTML

<div><iframe src="assets/videos/example.mp4" frameBorder="0" allowfullscreen ></iframe></div>

CSS

div > iframe {width:100%; height:600px;}

Height - set your height in pixels, how much you want it to be.

Upvotes: 1

dippas
dippas

Reputation: 60573

you need to embed your iframe in a responsive way, something like:

body {
  margin: 0
}
div {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
<div><iframe src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' type="video/mp4" frameborder='0' allowfullscreen></iframe></div>

Upvotes: 2

Related Questions