UPDATE:
The idea behind my attempts so far has been focused on adjusting the iframe container and fixing it based on the intrinsic ratio of the Iframe so that it would then as it responds to change in proportion the contents would also change proportionally. This does not seem to work as some elements of the iframe remain fixed. I would really like to have a responsive Strava Iframe but for some reason cannot figure out to achieve this. I have made a Codepen Collection with current attempts thus far.
I have recently added a shortcode for embedding Strava iframes into my Hugo site (academic theme). On the desktop, devices the iframes render properly and appear to be responsive in browsers, yet on mobile devices, this isn't the case. The issue at hand can be seen on this webpage and my GitHub repo. I would be very grateful for any help in resolving this.
I have been trying multiple tried CSS tweaks and variation recommended on the Hugo forum and on other online sources.
Current Shortcode:
{{ if and (.Get "id") (.Get "hash") }}
<div class="responsive-object">
<iframe height='405' width='590' frameborder="0" allowtransparency='true' scrolling='no' src="https://www.strava.com/activities/{{ .Get "id" }}/embed/{{ .Get "hash" }}"></iframe>
</div>
{{ end }}
Current CSS:
.responsive-object iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-object {
position: relative;
padding-bottom: 67.5%;
height: 0;
margin: 10px 0;
overflow: hidden;
}```
Despite trying to make the iframe container responsive, the same result occurs where it seems responsive on desktop browsers yet not on mobile devices. I am unsure of how to proceed from this point, or if I am missing something.
Do you add <meta name="viewport" content="width=device-width, initial-scale=1.0">
To your <Head> ?
If yes imma gonna edit my post with the solution :)
EDIT
The best article I've found thus far on creating responsive iframes is How To Make Responsive Iframes - It's Easy!.
There are three salient points:
Set no attributes in the iframe opening tag, specifically not width and height
Put a div container around the iframe, and use CSS height: 0; and then padding-bottom: nn%; to give the container a height expressed as the height:width ratio as a percentage.
Style the div inline with -webkit-overflow-scrolling: touch and overflow: auto which are necessary to handle scrolling on mobile devices and are unstable in CSS.
This code works for me:
// HTML (in an embed block, not a code block)
<div class="iframe-container iframe-container-for-wxh-500x350" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://www.targetWebsiteURL.com"> <p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe>
</div>
// CSS
.iframe-container { position: relative; margin: 5px; height: 0; overflow: hidden; }
.iframe-container-for-wxh-500x350 {
padding: 25px 25px 70% 25px; /* padding-bottom = h/w as a % */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px inset #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
} Use a separate class to style the padding-bottom so that, if you have more than one iframe and they are of differing wxh ratios, all you have to do is code a class for each and set padding-bottom to the different percentages.
Related
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
Apologies if this is obvious, I'm no CSS expert.
When you drop an image directly onto a web browser on any browser, they all implement some sort of "shrink to fit" functionality. Example is this video which shows shrink to fit in action on Firefox:
http://youtu.be/1LW-eByYXik
I want to implement what is shown in the video in my application and have it work cross browser to the greatest extent practical.
Is there a way to do this? Various documents on the web cover some sort of discussion about shrink to fit but none seem to discuss how to implement this for an image across browsers in a consistent manner.
I've looked at the code on the browser when an image has been dropped on and they all seem to take a different approach.
#slaks I have tried your suggestion just then on Chrome and it did not work. Here's the code I tried:
<html>
<head>
</head>
<body>
<style>
img {
width: auto;
height: auto;
max-width: 100%
max-height: 100%
}
</style>
<img src="whn-data/image.png">
</body>
</html>
</head>
This code seems to work:
img {
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height:100%;
max-width: 100%;
}
JSFiddle
Margin: auto is added to keep the image centered (both horizontal and vertical).
The max-height and max-width limit the image from going bigger than the screen.
BUT this technique has a disadvantage: the default size of your image has to be bigger than the height/width of the browser window or container it is in. If it is not margins will appear on all sides to keep the image's default dimensions.
You're looking for background-size: contain.
(assuming that the image is a background-image)
For an <img> tag, use
width: auto;
height: auto;
max-width: 100%
max-height: 100%
I think what browsers implement in those cases is the property zooom.
I FIGURED IT OUT. Sorry it took me a while. This is actually pretty obvious.
Use this:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
JSFIDDLE HERE
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;
}
This is a tricky question to word correctly, so I created a Fiddle to more accurately represent what I'm trying to do:
http://jsfiddle.net/LAtPJ/
.thumbnailContainer.video_embed
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The above code works perfectly for very nice, responsive YouTube videos. But...
If you imagine this in the context of a media gallery where images and videos should co-exist in a completely responsive design.
There will be rows and rows of media, and there is likely to be a difference in aspect ratio between the images and the videos and so therefore we're left with something that is no longer uniform.
Effectively, the YouTube video should be 100% wide, but it's height should be no taller and no shorter than that of the images. I previously had a version of this that was all fixed widths and heights so quite simply every image and every iframe was 200 x 200. Now, I want something more mobile friendly so although images I have exactly how I need them, videos are not.
Any ideas?
The end solution (if there is one) should preferably be CSS only and not necessarily specific to YouTube (some of the videos will be other services, but mostly rendered via an iframe like YouTube).
You guys are awesome so hopefully you'll come up with something cool. Thank you so much.
100% height is challenging, as you can see here: How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
Your best bet might be to use jQuery, if that's an option.
You might try giving both the .thumbnailContainer and .thumbnailContainer.video_embed iframe classes a min- and max-height. This is untested on mobile, of course, and I'm not certain how aspect ratio would be affected for non-responsive video embeds. Hope this helps.
DEMO here. Code snippet below:
.thumbnailContainer
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 200px;
max-height: 200px;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 200px;
max-height: 200px;
}
I thought it might be useful to document how I've decided to do this.
#ivarPrudnikov kindly suggested grabbing the YouTube thumbnails from the API. Something I had considered already, but, of course, it doesn't really matter whether the thumbnail container contains an iframe, text, or indeed an image, the same problem exists.
There's no straight forward way of keeping that container the same size as the other containers without there being an image in there of the exact aspect ratio.
There may be other ways... but I was beginning to feel they were too complicated, would be difficult to manage going forward and perhaps suffer from compatibility issues with certain browsers.
So, I've resorted to doing everything server side.
It's all written in PHP anyway, so I actually pass the YouTube video ID to a PHP script, fetch the thumbnail directly from YouTube and then I crop and resize it based on the desired thumbnail width. height and aspect ratio.
That all happens on the fly. I will more than likely implement some sort of basic caching mechanism whereby I actually save the image locally eventually.
Until then, problem solved and I thank you so much to everyone who too the time to answer and/or comment.
Much appreciated, always!
Chris
This is what I use. It sets the padding based on the embed width and height attribute and calculates the aspect ratio.
As long as you have 2 divs around the iframe (you can tweak for embed) and the width and height set as an attribute in the iframe, this will work.
jQuery(document).ready(function() {
jQuery('.embed-wrapper').each(function(){
dcembedheight = jQuery('iframe', this).attr( "height" );
dcembedwidth = jQuery('iframe', this).attr( "width" );
ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%';
jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px");
jQuery('.embed-container', this).css({"padding-bottom": ratio});
});
});
HTML - exclude embed-wrapper for 100% width and to only use the css in 16:9 ratio
<div class="embed-wrapper">
<div class="embed-container">
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
CSS - notice that the padding is set by the jquery but the css contains default 16:9 ratio padding
.embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
I'm currently trying to have an iframe fit the size of my screen, and any other user using it at different resolutions, except no matter what I try I'll either end up with the iframe being too small or the height being too large causing a double scroll bar. (The iframe and the page itself having scroll bars).
My objective is having the iframe fit only 85% width of the page (which works!), 100px from the top of the screen (also works), and then for the bottom to fit the edge of the bottom of my browser (that's where I'm stuck...)
HTML
<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>
CSS:
.maindiv {
width: 85%;
top: 100px;
}
.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}
If it counts for anything, I have the latest jquery running on my page if it'll help. Thanks in advance!
Use the onload() event of your iframe and the onresize() event of the window to resize the iframe to the required size.
This Microsoft Support article explains it well.
FYI, in javascript screen.width & screen.height will give you the screen resolution.
If you had Fx4, a simple height: -moz-calc(100%-100px) would work a wonder. A pity this feature is introduced and supported so late in CSS3.
If the 100px top is for tabs navigating the iframe, there may be a workaround. Just fill up your iframe to 100% height and then put those tabs inside the iframes as another iframe with a fixed size. Or just resort to frameset.
Whether this works for you or not depends on your exact design, but hope that helps.