So, I'm having quite a bit of a problem in making my iframes work in mobile devices. It's only covering about a half or more of the screen. I suspect it is because of some lines of css I put in my iframes.
.Wrapper2 {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.Wrapper2 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I would also like to add that for my text, I am using viewport sizing(vw, vh, vmin, vmax) if that would be of any help as I am also getting problems with long blocks of texts producing scrollbars. I also think (???) that it may have to do something with my iframe css and/or text sizing. What would be the necessary change that I need to implement? Thank you in advance!
Please post your html to make it easier for us to understand what the problem is.
Try this -- If you look into your iframe in html then you'll find :
<iframe width="560" height="315" src="https://www.youtube.com/embed/HDI9inno86U" frameborder="0" allowfullscreen></iframe>
So, there's width & height already defined inside the iframe element. All you have to do i change it to width="100%";
Related
I checked for a solution to my little problems but nothing worked so far. Hopefully someone could provide a solution for my two problems.
Doing my website with wordpress and not experienced in html and css .. just started to understand the issue I have.
I want to add ad-banners to my website and these are provided from companies either in JS or iframe. I have problems with both but let's start with iFrame. The problem actually is the banners are not responsive at all and even on preview on Laptop with MDPI screen the banners are already cut off on the right side.
The code:
<iframe scrolling='no' frameBorder='0' style='padding:0px; margin:0px; border:0px;border-style:none;border-style:none;' width='728' height='90' src="https://examplewebsite.world/I?tag=d_565m_79c_&site=565&ad=79" ></iframe>
How I changed it:
<div class="resp-container">
<iframe class="resp-iframe" src="https://examplewebsite.world/I?tag=d_565m_79c_&site=565&ad=79" ></iframe>
Added CSS:
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
(This is an example and used for a youtube video the ratio of 9:16 does not fit for padding-top of 56.25% but I tried others and did not work though)
Would be great if someone has an idea .. providers told me they never had this kind of issues with their banners and are not able to help me.
Thank you in advance :)
P.S. I forgot to mention (don't know if this is important). I am using left and right sidebars 20% each so middle content is 60% of the width and the banners should be displayed in the center.
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.
I'm struggling to get a map, which is embedded via an iframe on a WordPress page, to show responsively on full height of the screen, independent of the device: http://www.svalbox.no/map.
Full height means, the bottom of the map should not extend beyond the screen, i.e. the user should not have to scroll down to see the full app. The upper limit is obviously the navigation bar.
In the WP page editor, I included the following HTML/CSS (taken from various sources):
<style>
.embed-container {
position: relative;
height: 0; min-height:550px;
padding-bottom: calc(60rem + 10px);
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
small{
position: absolute;
z-index: 40;
bottom: 0;
margin-bottom: -15px;
}
</style>
<div class="embed-container">
<small><a>href="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea" style="color:#0000FF;text-align:left" target="_blank">View larger map</a></small>
<br>
<iframe width="940" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Svalbox" src="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea"></iframe>
</div>
It works for the width, which adapts to the viewport size. Whatever I try though (setting various height: 100%) doesn't work: either nothing happens or the whole map app shrinks to 40px... I know some HTML/CSS, but this one bugs me obnoxiously since hours..
Any help is appreciated.
Thanks
Nils
.embed-container{height:100vh;}
vh unit stands for percent of viewport(browser window) height. 100vh will give 100% of browser window height to the element. currently support for vh unit is limited(https://caniuse.com/#search=vh)
I’m currently working on a site that shows a fullscreen video using vimeo’s player api. problem is, depending on the browser window dimensions I get black bars, clearly because of the discrepancy between the window and video ratios.
I’ve tried quite a few css and js combinations, including but not restricted to the usual go to solution for responsive videos, fitvids, but all to no avail.
my question is, then: is a fullscreen responsive video with vimeo’s embedded player possible or is it better to drop that and build a custom player myself, using vimeo only for hosting the video files?
in case it helps, here’s the relevant code:
HTML
<div id="video”>
<div id="video-container">
<iframe id="main-video" src="//player.vimeo.com/video/123456789?portrait=0&title=0&badge=0&byline=0&autoplay=1&color=333&api=1&player_id=main-video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
CSS
#video {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#video-container {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#main-video {
position: fixed;
min-width: 100%;
min-height: 100%;
}
thanks in advance!
I don't think there is a way you can do this with css alone just yet (object-fit will probably work when it's implemented in other browsers). I'm not even sure that will work with our iframe anyway.
I think no matter which option you go with, you'll have to know the aspect ratio of the video and explicitly set the size to be larger than the window, and set the positioning to center it.
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%;
}