You have an additional 2 rulesets that will function as intended however you must...
...rectify this in HTML:
<div class="flexible-container-embed">
to this:
<div class="flexible-container">
...and include this in the .flexible-container CSS ruleset:
padding-bottom: 100%;
After adding these 2 rulesets, place them within a <style> element and then ensure it is positioned last inside the <head> section. Refer to the Plunker link below for a demonstration.
/* Flexible iFrame */
.flexible-container {
position: relative;
/* This blank line was most likely:
|| padding-top: 56.25%;
*/
height: 0;
overflow: hidden;
}
/* These rules say:
|| "Apply the following properties and their values to ANY `<iframe>`,
|| `<object>`, or `<embed>` THAT IS A CHILD OF any element with the
|| class of `.flexible-container`.
*/
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
When you implemented these 2 rulesets, you applied the class .flexible-container-embed to the wrapping div of the <object>, however both rulesets are meant for elements with the class .flexible-container as well as any children like <iframe>, <object>, or <embed>. Essentially, remove the -embed part from the class name.
Next up is the padding-bottom property. Typically set at 56.25%, when applied to an iframe container, it maintains a height ratio of 9 to width 16. This is suitable for wide screen videos, but not ideal for PDFs which usually have an aspect ratio of 8:11 or 72% (I utilized 100% in the example as per your request, anticipate an edit including a 72% version.) When combined with height:0, it creates a "shrinkwrap" container that adjusts its height based on content width. Update: there's no visible difference between 100% and 72% due to padding added by the PDF plugin.
I changed the <object> to an <iframe> since they offer more flexibility; you can also use <embed>. Check out this PLUNKER