I am having a problem with a kickstarter video that I am embedding. It works fine on everything except iOS devices. The iframe container is the correct size but when the video plays it is scaled down by about 25%.
I have done some research and tried fixing it but nothing is working for me. It appears as if it is a CSS conflict.
Here is a screenshot from my iPad:
http://louisreed.co.uk/tiddlybot/screenshot.png
HTML:
<div class="video-container">
<div class="embed-container">
<iframe src="https://www.kickstarter.com/projects/1320310506/tiddlybot-fun-and-simple-raspberry-pi-robot/widget/video.html" frameborder="0" scrolling="no"> </iframe>
</div>
</div>
CSS:
.video-container {
width: 75%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Any help or suggestions are welcome, cheers!
Related
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
I made a webpage with a sticky header that works fine on a desktop but not so well on mobile. For example, on an iPhone, if you turn your phone on to landscape mode, safari's tool bar will cover my sticky header. Similarly opening a link to my page on instagram will result in the same issue (instagram header will cover mine).
Heres's the HTML
<div id="container">
<div id="infotab-mobile">
<div id=rosemenu>
<div id="rose">
<img class="inforose" id= "roseimg" src="images/rose.png">
</div>
</div>
</div>
and the CSS:
#infotab-mobile{
display: initial;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
position: fixed;
z-index: 999;
}
#rosemenu{
position: fixed;
width: 100%;
height: 20%;
display: inline-block;
}
#rose{
position: relative;
width: 100%;
vertical-align: top;
text-align: center;
background: rgba(232, 232, 232, 0.96);
padding-top: 2%;
padding-bottom: 2%;
}
#roseimg{
margin: 0 auto;
text-align: center;
display: -webkit-box;
}
I've also noticed that using -webkit-overflow-scrolling: touch; disables an ios feature that allows you to scroll to the top of a web page by taping the safari tool bar. Has anyone discovered any work arounds?
I wrapped the iframe with the below <div> classes, but no matter where I put the CSS, it doesn't pick up the CSS,it just isn't working
HTML:
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/{$id}"></iframe>
</div>
</div>
And here is the CSS, I tried putting it in global.css, and every other css area, but nothing....
.auto-resizable-iframe {
max-width: 820px;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
I know there seems to be a lot out there about this, but none of the solutions seem to fix my issue.
I am trying to apply a fixed button to the bottom of my screen within an iframe. With my current implementation, I am experiencing a terrible flicker with the button on iOS Safari whenever I scroll.
Here's essentially what I have:
HTML
<iframe>
<body>
<div class="app">
<div class="app-content">
<div class="card">
<h1>Header</h1>
<p>Content</p>
</div>
<button class="fixed-button">This is flickering</button>
</div>
</div>
</body>
</iframe>
CSS
iframe {
border: none;
position: absolute;
height: 100%;
width: 100%;
top: 0; left: 0;
}
app {
-webkit-overflow-scrolling: touch;
overflow:auto;
position:absolute;
width:100%;
height:100%;
}
fixed-button {
position: fixed;
bottom: 1rem;
}
I've got a WIP on my site here http://jaredrauh.com/iframe-fixed-elements-ios/. Any suggestions would be amazing.
I know this question have been asked many times but I still can't manage to get it to work.
I am developing apps on iPad and generate a globe 3D in WebGL, some of the elements are created with Dojo (like the splitpane).
I basically have a top pane with a canvas and a bottom pane with different stuffs.
<div id="splitArea" data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props="orientation:'V'">
<div id="topDiv" data-dojo-type="dojox.mobile.ContentPane">
<div id="globePane">
<button class="globeItem" id="metButton" data-dojo-type="dojox.mobile.Button" onclick="displayOptions('MET')">MET</button>
<canvas id="globeCanvas"></canvas>
<script type="text/javascript" src="js/Globe.js"></script>
<div id="globeOptions"></div>
</div>
</div>
<div id="infosPane" data-dojo-type="dojox.mobile.ContentPane">
</div>
</div>
Here is the top pane elements CSS :
#topDiv {
top: 0px;
width: 100%; height: 50%;
}
#globePane {
width: 100%; height: 100%;
position:relative;
}
#globeCanvas {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
}
#globeOptions {
width: 150px; height: 150px;
position: absolute;
top: 40px; right: 200px;
z-index: 4;
}
.globeItem {
position: absolute;
z-index: 3;
}
And the Javascript that injects globe in the canvas :
var container= document.getElementById('globeCanvas');
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( { canvas: globeCanvas , antialias:true} );
else
renderer = new THREE.CanvasRenderer( { canvas: globeCanvas } );
renderer.setSize(container.offsetWidth,container.offsetHeight);
renderer.setClearColor(0x000000, 1);
...
}
Now question is : I want a Div (id="globeOptions") to appear on screen when I click a button named "MET", I got at first to create it (what is done in the code), but once created, the div isn't displayed.
The button was created with Dojo and is displayed well on canvas (I didn't do anything special so it must be Dojo auto config that lets it being displayed on canvas), but the div stays under canvas whatever I try.
I tried lots of solutions I found but nothing works (even the relative/absolute positions).
Why does it work on Fiddle but doesn't in device, am I doing something wrong?