删除iframe边框

Question

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:

As you can see the black border s 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>

Answer 1

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> 

Answer 2

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.