I'm building this site and I'm having trouble manipulating the iframe based on size of the device. Basically, what I want is if the use is on a tablet the video is one size but for example if the user is on a mobile device like a cell phone it is other size recommended it be smaller that the tablet or desktop window size. if any of that makes since.
I've tried using div's but I may have implemented then wrong but from all I researched I doubt it. I also made an iframe in the CSS just for that device size and had a default iframe for all devices.
#media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
.center{
width: 300px;
height: 100px;
position: fixed;
left: 48.5%;
top: 44%;
transform: translate(-50%,-50%);
}
iframe {
border:none;
overflow:hidden;
width: 500px;
height: 250px;
frameborder="0";
allowTransparency="true";
allowFullScreen="true";
}
}
iframe {
border:none;
overflow:hidden;
width: 1000px;
height: 500px;
frameborder="0";
allowTransparency="true";
allowFullScreen="true";
}
<!DOCTYPE html>
<html lang="en">
<p align="center">
<!--stackoverflow trying to get the videos to shrink when using mobile devices. need to be done for "ipad" and cell phones from my knowledge computers are fine. -->
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560">
</iframe>
</p>
<p align="center">
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FTimeOutForMeInc%2Fvideos%2F526931557744638%2F&show_text=0&width=267" >
</iframe>
</p>
</body>
</html>
Try this:
.embed-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
<div class='embed-container'><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560"></iframe></div>
more detail
Related
I have a website I created in 4k resolution (3840 x 2160) that I want to display in an iframe. I've been using chrome inspector tool to create the website in the desired resolution. Is there a way to display the iframe in lets say a 1920 x 1080 iframe and the inner iframe (the website) display in the native resolution? The solutions i've found don't seem to scale properly. Is there a way to create an iframe that mimics the chrome dev tools responsive scaling?
.container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
<div class="container">
<iframe
class="responsive-iframe"
src="http://website.com"
></iframe>
</div>
<style>
.outher{
position: relative;
width: 800px;
height: 300px;
overflow: auto;
max-width: 100%;
max-height: 100vh;
}
.iframe{
position: absolute;
left: 0px;
top: 0px;
width: 1920px;
height: 1080px;
}
</style>
<body>
<div class="outher">
<iframe
src="https://www.youtube.com/embed/OC738Vw-zcg"
class="iframe">
</iframe>
</div>
</body>
you have to set a <div> arround. And then set the iframe rendersize with the width and height tag (in this sample 1920x1080).
In my program, I need to place the image of a button on top of another image exactly where that button is supposed to be. To be able to use it in different monitor resolution, I position the images using %. I also set up height and width of the body (or div) to 100vw and 100vh (i also tried to screen.height and window.height). But when I change resolution of the monitor, the images adjust to the new resolution but now with enough precision y the height (width is fine). The button is displayed a little bit higher in a lower resolution. Why is not working?
.alarm img {
position: fixed;
width: 4.5%;
left: 41.7%;
top: 71%;
}
.faceplate img {
position: fixed;
width: 17%;
left: 40%;
top: 40%;
margin-left: 0px;
margin-top: 0px;
}
<html>
<body style="width:100vw; height:100vh; margin:0;padding:0">
<div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">
<div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>
</div_logo>
</body>
</html>
You should use media queries to fix this problem for different screen sizes. You have to create different types of CSS for different types of screen sizes.
In this fact, you have to go to media queries.
For more details, you can follow the link
https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp
In media, query defines your CSS style for different screen sizes.
I hope this is what you are expecting.
.faceplate {
top:25%; /* just change this */
left:25%; /* just change this */
position: absolute;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
position: relative;
padding: 0;
}
.faceplate {
top: 25%;
left: 25%;
position: absolute;
}
.faceplate > img {
width: 90%;
height:90%;
}
.faceplate .alarm {
position: absolute;
top: 0;
}
.faceplate .alarm > img {
width: 70%;
height: 70%;
}
<html>
<body>
<div class="faceplate"><img src="https://dummyimage.com/100x100/e055e0/fff">
<div class="alarm"><img src="https://dummyimage.com/80x80/000/fff"></div>
</div>
</body>
</html>
I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
I am trying to make a screenshot scroll-up inside an iphone. I have an html like this :
<div class="iphone-container">
<img src="images/partenaires.jpg" class="partner-img"alt="">
</div>
and my css :
.iphone-container {
background-image: url("../images/single-iphone.png");
background-size: cover;
height: 530px;
width: 420px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
.partner-img {
position: relative;
width: 355px;;
height: auto;
z-index: 2;
padding-top: 128px;
}
the image is scrolling up properly but I want it to disappear when it reaches the top of the screen of the iphone. Because right now it looks like this when I scroll up on the screenshot :
What do I need to change in my css and html to achieve the proper result just like in the 5th section of this website :
http://wefoot.co/
link of screenshot :
http://i63.tinypic.com/anc80l.jpg
link of iphone container :
http://i67.tinypic.com/6hhwti.png
What you need to do is position a div on top of the iphone image that is exactly the size of the screenshot area and then set that div to overflow:scroll.
So kind of like this:
<div class="iphone-container">
<div class="iphone-screenshot-area">
<img src="images/partenaires.jpg" class="partner-img"alt="">
</div>
</div>
And for the css:
.iphone-container {
background-image: url("../images/single-iphone.png");
background-size: cover;
height: 530px;
width: 420px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
.iphone-screenshot-area {
position:absolute;
top:40px; //Totally guessing here, adjust to proper value after testing
left:25px; //Also guessing here, adjust to proper value after testing
width:355px;
height:490px; //Also guessing here, adjust to proper value after testing
overflow:scroll;
}
.partner-img {
position: relative;
width: 355px;;
height: auto;
z-index: 2;
}
<html>
<head>
<style>
.iphone-container {
background-image: url("http://s21.postimg.org/hirg419tj/iphone.png");
background-size: cover;
height: 790px;/*the height of the iphone image*/
width: 400px;/*the height of the iphone image*/
position: relative;
}
.text-holder {
position: absolute;
width: 336px;/*the width of the iphone-image screen*/
height: 600px;/* the height of the iphone-image screen*/
z-index: 2;
top: 100px;
left:38px;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
</head>
<body>
<div class="iphone-container">
<div class="text-holder">
<img src="http://s12.postimg.org/yvewkodb1/screen_text.png"><!--I didnt use any class for this image but made a div to place it inside the iphone-->
</div><!--close the text-holder div which is the screen of the iphone image-->
</div><!--close the iphone-container div-->
</body>
</html>
I am trying to place icons for mobile web app using css.
However I am having some problem with this.
I set outer box and placed icon there which I thought would be good for different devices since they have different size
Below is my code but I am not seeing the icons
Am I missing anything here?
This is my html
<link rel="stylesheet" type="text/css" href="/mobile_pages/main/main_page.css"/>
<br>
<div id="siteMenu">
</div>
This is my css
#siteMenu{
position: relative;
width: device-width;
height: device-height;
}
.icon{
background-size: cover;
width: 80px;
height: 80px;
}
#intro_icon{
position: absolute;
background-image: url('intro_icon.png');
top: 50px;
left: 0px;
}
#direction_icon{
position: absolute;
background-image: url('direction_icon.png');
top: 50px;
left: 90px;
}
#pic_icon{
position: absolute;
background-image: url('pic_icon.png');
top: 50px;
left: 180px;
}
when I give specific px for width and height in #siteMenu, I can see the icon.
However, I want it to be device width and device height.
I tried 100%, auto value for width and height but still didn't work.
what should I do here?
Just tried your code in jsFiddle, with google logo, it is working fine.
Can you make sure the path of your icons is right, so in the same folder as your CSS?
Make sure the ccs file is well referenced, and the < link> tag must be in the < head> tag of your page?
#intro_icon{
position: absolute;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png');
top: 50px;
left: 0px;
}
for device-width and device-height, they are media-query parameters not css attributes. Also you need to set up html and body tag full page :
html{
width: 100%;
height: 100%;
}
body{
min-height:100%;
padding:0px;margin:0px;
}
#siteMenu{
position: relative;
width: 100%;
height: 100%;
height: 100vh;
min-height:100%;
}
JsFiddle, Note that vh is not supported by all browsers (e.g IE8)