Requirements:
- The HTML: The iframe HAS to be inside of a containing div. See code down below.
- The CSS: The container should be able to have ANY valid
widthandheightusing thevwandvhviewport units. Se code down below. - Yes, the
widthandheightHASto be invwandvh. - The static video preview image should NEVER be cropped.
- The static video preview image should NOT have any black bars above and below (letterboxing).
- The static video preview image should NOT have any black bars to the left or to the right (pillarboxing).
- The static video preview image should use as much space estate as possible inside the div that contains it.
- The static video preview image should ALWAYS keep its aspect ratio of 16:9.
- Scrollbars should NEVER appear.
- The static video preview image should be centered vertically as well as horizontally inside the div that contains it.
- Responsive Web Design.
When resizing the browser or viewport all of the above requirements should be fulfilled.
HTML:
<div class="container"> <iframe></iframe> </div> CSS:
.container { width:90vw; height:50vh; } 7 Answers
Answers 1
.container { width:90vw; height:50vh; } .container iframe { width: 100%; height: 100%; } Seems to work quite nicely in this fiddle https://jsfiddle.net/1q10L7hj/
Answers 2
if you want Responsive use
.container, iframe { width:100%; height:auto; } Answers 3
Same solution, but no extra markup for keeping the ratio.
JsFiddle with same comments totally not needed.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>Fully Container Centred Iframe</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style> .container { display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */ position:relative; padding:; /* optional, margins ignored */ width:100vw; /* any value */ height:1vh; /* will expand by the :before element */ overflow:hidden; /* hide eventual black bars */ background:tan; /* bg-colors just for demo testing */ vertical-align:middle; text-align:center; } .container:before { display:block; padding-top:56%; /* keeps the 16/9 ratio for the AP */ height:0; background:red; content:"\a0"; } .container iframe { position:absolute; /* to be ratio consistent */ top:-.5%; left:-.5%; /* overflow eventual black bars */ border:0; width:101%; /* grow some to avoid thinner black bars */ height:101%; overflow:hidden; /* for html5 browsers the html attribute is depreciated */ background:gold; vertical-align:middle; /* remove the textline's descendent space */ } </style> </head><body> <div class="container"> <iframe scrolling="no" src=""></iframe> </div> </body></html> Answers 4
I have gotten the result you wanted, I however had to add an extra div as the parent of the .container class. This JSFiddle should work for users on chrome (Windows desktop version) however when I tried to use the same fiddle on Edge and IE11 I found that it would create the undesired letter-box effect due to the image cover zooming too far out.
HTML
<div id="wrapper"> <div class="container"> <iframe scroll="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen> </iframe> </div> </div> CSS
body { margin: 0; } #wrapper { width: 90vw; height: 50vh; } .container,iframe { width: 100%; height: 100%; } I am not sure if this works for Firefox, so perhaps if you have Firefox you can try it on my JSFiddle. However for Chrome (at the very least) this should be the solution you where looking for as stated by the requirements you listed.
Answers 5
why don't you just use the calc method to get the aspect ratio width you are wanting?
HTML
<div class="container"> <iframe src="" frameborder="0"></iframe> </div> SCSS
<style> $width = 80vw; .container { width: $width; height: calc(($width/16) * 9); position: relative; } iframe { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; -webkit-transform: translate(+50%, -50%); transform: translate(+50%, -50%); } </style> then you can change the width of it anywhere and apply whatever positioning you want on the container div and the iframe with follow suit
Answers 6
I think the table-cell display could solve this. Just apply it on the container so the iframe is the content
According to specs the browser will insert dummy elements where it needs to render the cell correctly and fully centre and to contain its content and if it need, grow with it.
The requirements: I think some of them is beyond the scope of your question, they will also depend on what is loaded in the iframe, out of control of this container document. My suggested code is simple, but I believe it meets all requirements possible for the iframe parent and still be crossbrowser friendly.
The forbidden black bars and the mandatory aspect ratio could still be at fault in the loaded document. If you can't control whats loaded, the last option might be the "srcdoc" and "seamless" attributes, but that would exclude e.g. all IE versions.
JsFiddle with some comments totally not needed. Hope the edit below solves the case.
Anyway, I had fun! Thanks! :)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>Fully Container Centred Iframe</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style> .container { display:table-cell; padding:; width:100vw; height:20vh; background:tan; vertical-align:middle; text-align:center; } .container .ratio{ display:inline-block; position:relative; padding-bottom:56%; width:100%; height:0; overflow:hidden; vertical-align:middle; } .container iframe { position:absolute; top:-1%; left:-1%; border:0; width:102%; height:102%; overflow:hidden; vertical-align:middle; } </style> </head><body> <div class="container"> <div class="ratio"> <iframe scrolling="no" src=""></iframe> </div> </div> </body></html> Answers 7
I would recommend using a JavaScript window.resize listener to solve this kind of an issue.
0 comments:
Post a Comment