I'm trying to embed the IMDB movie trailer iframe into a mobile Ionic app,
problem is that apparently their embed code can't go below 400px width, I've set the parameters for the iframe with the width value as provided by the site:
<iframe src="http://www.imdb.com/video/imdb/vi354465561/imdb/embed?autoplay=false&width=320" width="320" height="480" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="no" scrolling="no"></iframe>
but all the elements inside their html structure show a fixed width of 400px. If this is a limitation of their page, what recommended alternative can I use to display the trailer correctly over a 320px width viewport? which is what I'm using as default mobile visualisation.
The only workaround I'm applying now is to move the iframe a bit over the container so the fullscreen button is available, but this doesn't look right.
The only solution is to change the iframe's CSS and make it responsive to your vieweport, which might be possible. Try what's mentioned here: How to apply CSS to iframe?
Edit: If all fails, seems like the only fallback could be creating a scrollable container over your iframe so that the user can at least view it completely scrolling. You can do this with the CSS Overflow property
Related
I am trying to use youtube iFrame in my app. When I click on the full screen mode the video stretches vertically as a reel because the content in the video is like that. But I want to make the full screen mode horizontal. How can I do it using javascript or html?
I tried using css but the iframe somehow overrides my css injection. I injected my css using javascript in inline.
<iFrame>
I am trying to embed an iframe of an appointment scheduling frontend in my page. The scheduling program is responsive and when embedding in my page the width is fine. The problem is the frame height is very small. I have tried changing the css everyway I can think of. I have tried multiple different css tricks to no avail. Is this possible with css alone? I have access to both servers. Below is a picture of what I have so far. If the content was full height it would be perfect.
I have read multiple posts on stackoverflow and the web. I tried everything from this site, no go. https://benmarshall.me/responsive-iframes/
Here is an image of what I have now:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://xxx" allowfullscreen></iframe>
</div>
I want the iframe to be the full height of iframe content.
Any help/direction would be appreciated.
I was finally able to make this work using CSS. I had a responsive style-sheet that was overriding my css class. I added the below code and it is working for me. Fortunately I have access to the iframe content and know the height that I needed. In order for this to work this way the iframe content must be responsive already. I used the following code and things are working for me. Wish I hadn't spent so much time on something so simple, but happy I got it going.
.embed-responsive-full {
padding-top: 100%;
height: 720px;
}
My app has a functionality that loads another route in a iframe. The intention is to change some layout settings, colors etc and see how that page will look in the browser in its final and original version (100% in a desktop or laptop).
The problem is that the iframe is loaded in a div that has something like 2/3 of the system's width (it's a Bootstrap column). This is smaller than our media-query breakpoint and the iframe content is loading the responsive design. But that breaks the rule in paragraph one.
I needed it to be a miniaturized version of the original page.
Is there a way to achieve this result?
What I am trying to do is somehow similar to this on Google's PageSpeed:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop
THe difference is that Google takes a picture and in my app the user must be allowed to interact with the page, browse other links, click buttons etc. It is a screen simulator/previewer but not responsive.
As CBroe mentioned, the problem is that the CSS for the page loaded within the iframe is using the size of the iframe as it's viewport size. You'll want to size the iframe according to how you want the actual page to display (1200px wide, for example) then use a scale transform to reduce the size of the iframe.
Your HTML could look like:
<iframe width="1200" height="600" src="https://example.com"></iframe>
Then rescale using CSS:
iframe {
transform: scale(0.3);
transform-origin: top left;
}
Here's a live example: https://codepen.io/JoshuaToenyes/pen/gMMLze
I'm sorry if this question has been already answered, but can't narrow down or ask the question right.
Here goes, I have a client's website that has three embedded iFrames,the website is for Holiday accommodation and uses a Calendar, Booking Enquiry and the floorplans, all come from different vendors.
The problem is they all have different widths and height.
The width in most instances is set to 100% that's fine, but the height is where the problem is, even if I try to set the height to what I want it, it defaults back to a set size.
The default size is 309px and is in two css files needed for the site in general.
Is there a little snippet of code that could over ride that size set in the CSS?
The site in question is here: http://aalen.com.au/aalen1-pims.php
The main area of concern is the Floor plans, they just end up in a smaller iFrame and doesn't show off the potential of those plans. Many thanks
Looking at the page, I can only see one CSS file affecting your iframe, app.css, there are other css files, but none of them change the height of the element.
I assume you're referring to this code from your website.
<iframe frameborder="0" height="400" scrolling="no" src="http://pl.an/aalen-1/embed" width="100%"></iframe>
It looks like you're setting the height in two places, once in app.css with the code:
iframe{
height:390px;
text-align: center;
}
You are also setting the iframe height with the height attribute as seen in the first code example. Try removing the height="400" attribute from your iframe tag and only have the height in the app.css file.
In future you can try using the Firefox developer tools or Chrome developer tools to manipulate the CSS on the page while it is open, in order to see what you need to change, and how it will affect the rest of the content on your page.
I am using the Google Maps API as described here, and I added Adsense Ads to the page as defined here. I would like to display different ad sizes based on the screen size of the device. Currently I display one size, that is too small for a desktop browser, and too large for a mobile browser.
Is there any way to go about doing this?
Try checking the javascript properties screen.width and screen.height.
Place them in a container and set the container to be in % width and then set your iframe to be the same. So depending on the screen size your adds will expand to fix the percentage. You may need to fire a resize event to cater for a user minimizing the screen. Example:
Your CSS:
.ad-holder{ width: 33%;height: 200px;} //width can be anything you declare
Your HTML:
<div class="ad-holder">
<iframe src="the map or ad" width="100%" height="200px" frameborder="0" id="map_options_styling_iframe">
</iframe>
</div>