Adujst html to iframe size - html

So i have this issue. i'm tryng to adjust and html inside an iframe , and i keep bangging my head arround this. the Html contains an image slider and my objective is that the image slider fills the entire iframe.
this is the html of the iframe, targgeting the index1.html:
<iframe height="520px" width="100%" src="index1.html" name="frame" style="border: none"></iframe>
and here is the css that controls the index1 image slider dimensions
body{
padding: 0px;
margin:0px;
}
#container{
width: 1298px;
height: 520px;
padding: 0px;
margin-top:0px;
margin-left:0px;
}
#slider{
position: center;
overflow: hidden;
width: 1298px;
height: 520px;
padding: 0px;
margin-top:0px;
margin-left:0px;
}
Every time i try to adjust te height of both image slider and it's container, the i frame creates a scroll.
The results i'm getting is the following:
please view image
That red marked grey area is the remaining of the iframe that i can't get the image slide fit into.
How can i do this?

Use either scrolling="no" or overflow: hidden;
<iframe height="520px" width="100%" src="index1.html" name="frame" scrolling="no" style="border: none; overflow: hidden;"></iframe>
You should probably look and see if some part of the "index1.html" is wider than the image slider. Pay attention to margins, padding, and borders. I would look into this before you try my suggestion above, because if there is some part of the content being hidden it may cause you issues later.

Related

Add border to responsive embedded video

I'm trying to add a border to a responsive embedded video.
I have tried two different approaches to show the video:
1.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe>
</div>
2.
<div style="position: relative; width: 100%; padding-bottom: 56.25%;" class="text-center">
<iframe allowfullscreen="" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%"></iframe>
</div>
I have tried to add a border to both approaches, using:
a.
border:3px solid #EEE;
b. (variations of below e.g. different width/height values etc, and where the parent div got a background color, which is the border color)
<iframe style="left: 5px; top: 5px; width: 100%; height: 100% ... >...</iframe>
There is one consistent problem when adding the border, for all approaches: the video is either to big or too small for the space it is contained in. Either the video sort of zoomed in on, or it is too small such that there is a black borders appearing either vertically or horizontally depending on whether the width or height is too small. See image below.
I have tried to add magical values to get rid of the black border, like increasing outer-div's height padding a little, move the iframe by setting the left/right by some value and reducing it's size by some value (where all values are set to maintain the aspect ratio of the video). I would use this in worst case. The reason why I ask is because I hope there is a much smoother way to do it.
How can I add any-sized border to a responsive video without black borders appearing or the video being zoomed in on?
If you have access to directly modify the HTML and CSS of your site, you could try adding a <div> around .embed-responsive and then add a border to that. As a general rule, it's a good idea to keep your HTML and CSS separate if you can.
A quick demo: https://codepen.io/mikejandreau/pen/jxNJmK
Add a wrapper <div> like so:
<div class="embed-border"><!-- add this guy -->
<div class="embed-responsive">
<iframe src="your-video"></iframe>
</div>
</div><!-- close .embed-border -->
And add the CSS:
/* extra div which gets the border */
.embed-border {
border: 5px solid red;
box-sizing: border-box; /* prevents extra width from being added */
}
/* aspect ratio and positioning for responsive video */
.embed-responsive {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}
.embed-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

How to make slideshare iframe responsive

I have added slideshare iframe with presentation to my page
Code: <iframe src="//www.slideshare.net/slideshow/embed_code/key/HQoiz6GR1oLe1n" width="860" height="600" frameborder="600" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
But when I open page at mobile phone there appear black area around presentation:
screnshot
I know that it happens because of style height="600", but when I remove it presentation becames small. How to remove this black areas around presentation?
With some CSS it’s very easy to make slideshare embeds that scale the height in relation to the actual width.
You need to add an outer , with 0 height, and 100% width, and a padding-bottom as percentage of the aspect ratio (eg 9 / 16 = 56.25%) with an extra padding of 38px for the slide navigation.
<div class="iframe-slideshare-16x9">
<iframe src="//www.slideshare.net/slideshow/embed_code/key/h1Fw1vmfv5uVlM"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no"
allowfullscreen>
</iframe>
</div>
The CSS looks like this:
.iframe-slideshare-16x9 {
padding-bottom: calc(56.25% + 38px);
position: relative;
width: 100%;
height: 0;
}
.iframe-slideshare-16x9 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:1px solid #CCC;
}
More on this, at my blog: https://nathan.gs/2018/01/07/responsive-slideshare-iframe/
this is not issue with iframe as your iframe is working properly and it is responsive
the problem is images/slides in slideshare iframe are bit small in height and I believe you cant do anything about it
hope it helps
Add the following media query to your css:
#media (max-width: 667px) {
iframe {
width: 280px;
}
}
Feel free to tweak values as desired.

Stop Iframe from preventing scrolling of parent document?

I seem to have the opposite problem of everyone else with iframes and scrolling. I need the iframe (contains a youtube video) to NOT prevent scrolling of the main document. If I hover my mouse over it, the page won't scroll with the scroll wheel, and according to the latest chrome canary simulation of touch devices, I can't put my finger on the frame and scroll the main document either. Any way to stop this? My CSS is below:
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width:95%;
margin:auto;
display:block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.
If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.
If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.
Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.
Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.
Using a YouTube video and the CSS in the question, I've included a demo for you to see. I also included two identical iframes that are scrollable and applied pointer-events: none; to one to demonstrate how it works.
.tall {
height: 1500px;
}
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
width: 95%;
margin: auto;
display: block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scrolling-iframe {
margin-top: 35px;
display: inline-block;
height: 500px;
}
.no-scroll {
pointer-events: none;
}
<div class="tall">
<div class="GalleryVideoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<iframe class="scrolling-iframe" src="https://www.wikipedia.org/" frameborder="1"></iframe>
<iframe class="scrolling-iframe no-scroll" src="https://www.wikipedia.org/" frameborder="1"></iframe>
</div>
There used to be a scrolling attribute, but it is deprecated in html5. try this:
iframe {
overflow: hidden;
}
Don't forget to set your width and height somewhere!
If you wanted to try the iframe scrolling attribute, you could like this:
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
See working example here:
http://jsfiddle.net/4dt4zhwt/1/
I had horizontal-scrolling disabled like so:
html, body {
overflow-x: hidden
}
On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.
This fixed it for me:
* {
-webkit-overflow-scrolling: touch
}
I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hidden hidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!
I had an iframe in full width (with a Vimeo video inside) and it prevents the page scrolling.
Here is how I solved this issue :
<div class="video">
<iframe src="path-to-video"></iframe>
</div>
.video iframe {
pointer-events: none;
}
More info on this css property : https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

horizontally centering an image(s) in an iframe within a div

I have looked all over and tried all sorts of different coding with defining the width and display; block and nothing seems to work.
I am trying to center any image I put within this iframe that is located in a div. So far everything I've tried has kept the image aligned to the left. Here is the code. Hopefully someone can help.
#apDiv2 {
position:absolute;
width:1020px;
height:490px;
z-index:2;
left: 0;
top: 300px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
clip: rect(auto,auto,auto,auto);
}
#bottomframe {
height:490px;
width:1020px;
border:none;
scrolling:no;
display: block;
margin: 0 auto;
border: 0;
}
The HTML code is as follows:
<div id="apDiv2">
<iframe id="bottomframe" name="bottomframe" src="fliers/image1blurthumb.png">
</iframe>
</div>
You cannot do it this way. Since it's an iframe, it has a separate document context and styles. You'd have to use javascript to inject CSS into the iframe, but since you are opening the image directly in the frame, you have no HTML document in there to append styles to.
But I got to ask, why on earth are you using an iframe to display an image? Why not just a regular IMG tag?
Try adding text-align:center to the #bottomFrame style. That should center the image within the iframe. You may also need to give the iframe position.
The image must be less than 1020px wide, though, for centering to occur.

How to make a PDF inside object tag responsive?

I am trying to make my website responsive, and I have a PDF viewer in object tags in the body simply like this:
<object width="950" height="800" data="images/ah.pdf"></object>
Since the width and height are defined, I changed it to:
<div id="custom">
<object data="images/ah.pdf"></object>
</div>
and then adjusted the div in the css portion using percentages. My problem is that the whole PDF viewer does not show, and instead is a small box that has scroll bars on the sides, so you have to scroll left right and top bottom. Is there any way I can get it to adjust the PDF size according to the window size instead of just adjusting the PDF viewer alone? I hope this makes sense as clear as possible. Thank you!
Change your object tag to this:
<object data="images/ah.pdf" style="width: 100%; height: 100%; display: block;"></object>
You can add the style to a class, then include the class in your object tag. Or use another variation to get the styles applied. The width and height will be the same size as its parent container.
#Adam answer may work. I honestly don't deal with much/ BUt I will tell you that I have setup iframes for displays and they are responsive-compatible
This is what I'd do
<div class="content">
<div class="embed-container">
<iframe src="/images/myPDF.pdf" frameborder="0"></iframe>
</div>
</div>
.content {
width: 50%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%; /* play with this until right */
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}