I'm trying to embed a pdf document in html code, and I tried three different approaches, which actually gave me the same result:
<embed src="files/cv_aaragon_en.pdf" width="100%" height="100%">
<object data="files/cv_aaragon_en.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No problem, you can still download the PDF file.</p>
</object>
<iframe src="files/cv_aaragon_en.pdf" width="100%" height="100%">
shown in the figure:
Now I have the following questions:
The frames do not use the entire width of the page (which I believe is normal), because there is a lot of white space to both sides of the gray areas. This doesn't bother me.
If the definition is set to width="100%", why is it not taking the full width? Why are there gray regions? This bothers me because the pdf should be larger so that it becomes readable.
I could change the width, but I don't want to hard code its value so that the page looks good regardless of the device. Is there a way to obtain the actual width and put it in that width definition?
The same with the height, I need it to be much larger, but I don't want to hard-code its value. How is this done?
And finally, given the three approaches above, which one is the best in terms of loading speed?
Thank you.
You can try adding a style tag:
<iframe style="position: absolute; height: 100%" src= "files/cv_aaragon_en.pdf" />
Related
I'm looking to iframe in a web form that has variable height depending on the page of the form user is on, so that it will be responsive on mobile too
By setting the width it seems to display appropriately, however setting the height as shown in the HTML below seems to cut off all but the top of the form.
<iframe width="100%" height="100%" src="https://credit.omnisourcetech.com/mcgggg?affiliate=mcgggg&deposit=200&card=elite" frameborder="0" scrolling="no" />
Because of the nature of how this form will be embedded (into a Weebly site using the custom HTML option), it is not feasible to use CSS or javascript to accomplish this.
You can incorporate "style" into your iframe tag like so:
<iframe style="width:300px;height:40%;color:blue;">
Then just type like you would within a normal tag or a css file
I have an iframe element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins).
Copying and pasting the iframe code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the iframe dimensions don't adjust for the different screen size.
Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the iframe dimensions to be dynamic?
Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.
Edited to add:
Following the first two responses, I inserted the HTML line
<iframe style="width:100%; height:500px;overflow:auto;">
and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:
Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):
<center>
<div>
<iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
</iframe>
</div>
</center>
For what it's worth, I've tried to delete the width="320" height="240" snippet at the end of the <iframe> tag, but as I click "update" in the HTML editor, the snippet reappears.
Even though you don't have direct access to the CSS, you can still change css by using inline styles.
The way you do that is by using the style="" inside the tag you want to change the CSS styles.
The way you make the width dynamic is by using the size as percentage instead of pixels.
For example:
<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>
Notice the width:100%;, this will cause the iframe to always be 100% of the screen size. The height will always be 500px, but you can change it to whatever you like.
You can use inline styling in the iframe element. Have a look at this link.
I set width to 100%, which means it will resize to whatever the size of the container. The height is fixed, but if it can't fit inside the container the overflow: auto; will make the scrolls show up.
<div>
<iframe style="width:100%; height:500px;overflow:auto;">
</iframe>
</div>
The controls are longer than my video here is my code. it's pretty simple
[video width="240" height="135" mp4="http://www.petersecord2014.ca/wp-content/uploads/2014/10/PeterSecordMayoraltyKick-off-Speech23July2014.mp4"][/video]
Things that I have already tried from what I have read online so far :
added control after height (no change)
made height blank (no video
because height was blank)
Try using percentages instead of px for one of your dimensions (most likely height).
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.
I have this website: http://thc-racing.ucoz.com/index/forum/0-14
It can be seen that under the iframed forum there is a huge space, I made it so I can display as much as I can while navigating but, is there any way i can make the height adjust after each page inside is loaded?
Code:
<iframe
style="-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px"
height="4800" width="900"
frameborder="0" src="http://thc-racing.forumotion.co.uk/"></iframe>
I have access to CSS and Scripts on the forum.
Thanks
There is a similar question at Adjust width height of iframe to fit with content in it where you could use the code provided and modify it to adjust width and height with your own constant values, instead of auto-adjusting as the code provided in the accepted answer does.