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).
Related
I am trying to embed a youtube video on bearblog.
My goal is for the video to be variable width (for viewing on phone / computer), and for youtube fullscreen capability to be enabled.
I followed the instructions here https://stackoverflow.com/a/49887085/10792715 and here YouTube iframe embed - full screen
/* Set your aspect ratio */
.video-container {
position: relative;
overflow: hidden;
height: 0;
/* width: 100%; */
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}
.video-container iframe{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
/* And set the max-width of the parent element */
.video-wrap {
width: 100%;
max-width: 600px;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
and I embedded the video as
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"
allowfullscreen></iframe>
</div>
</div>
However, even though the video is variable width, there is no fullscreen capability. It simply says
Full screen is unavailable.
Find out more
I tried all kinds of tricks
allowFullScreen="true"
allowFullScreen="allowFullScreen"
allowFullScreen
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
but none worked.
PS.
Following the advice of #Marco Aurelio Fernandez Reyes, I checked the console, and this is what I got:
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"></iframe>
</div>
</div>
i.e., the fullscreen commands are just ignored.
This was not a problem of html or css, but rather a problem of bearblog.dev.
The problem was fixed and now fullscreen works correctly.
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'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
I have a video playing in the background of my top div. It looks fine when the screen is full size, but when I resize the browser window to see how it will look on smaller screens, the height of the div remains the same, leaving a big empty space between the background video and the next div.
Here is a preview of the site if you'd like to see for yourself, along with the specific code. https://codepen.io/CarlyWysocki/pen/YYaBOd
HTML:
<div class="jumbotron" id="top">
<video autoplay loop>
<source src="https://videos2.sendvid.com/03/25/up5p1yhu.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="container text-center">
<h1>Mac Demarco</h1>
<h4>Canadian singer-songwriter, multi-instrumentalist and producer.</h4>
<i class="fa fa-chevron-circle-down"></i>
</div>
</div>
CSS:
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
height: 100%;
overflow: hidden;
position: relative;
}
.container {
position: relative;
}
If it just stays in the center, you can add css media queries resizing appropriately. One could also just use a picture for small screens via media queries.
Using the referenced stack overflow answer:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I have an you tube video in a wrapper.
<div class="featured_video_plus">
<iframe width="730" height="435" frameborder="0" id="fvpyt234171" type="text/html" src="youtubesourcefile"></iframe>
</div>
When I put following CSS code, this you tube video is responsive.
/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
But It is NOT responsive when the wrapper is in another DIV.
I have this code also in some places:
<div class="utube-wrapper" style="width: 730px; margin: 0px 33px 32px 0px; float: left;">
<!-- Featured Video Plus v1.9-->
<div class="featured_video_plus">
<iframe width="730" height="435" frameborder="0" id="fvpyt233458" type="text/html" src="youtubesourcefile"></iframe>
</div>
</div>
How can I make this you tube video responsive when it's is in the div utube-wrapper also?
I've tried following code also.. but not working.
/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Just take out -> width 730px and float left from the utube-wrapper
One possible solution:
// CSS & HTML
.center-block-horiz {
margin-left: auto;
margin-right: auto;
}
.border-5px-inset-4f4f4f {
border: 5px inset #4f4f4f;
}
.set-padding {
padding: 30px;
}
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#Iframe-Maison-Willem-Tell {
max-width: 80%;
max-height: 300px;
overflow: hidden;
}
/* padding-bottom = h/w as % -- set aspect ratio */
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
<!-- embed responsive iframe -->
<div class="set-padding border-5px-inset-4f4f4f">
<div id="Iframe-Maison-Willem-Tell"
class="border-5px-inset-4f4f4f center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<!-- style overflow and overflow-scrolling inline because not
stable in CSS -->
<iframe src="http://maisonwillemtell.be">
<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>
</div>
</div>
The result can be seen in the Pen Responsive Iframe - Base Code.
The markup and CSS and the rationale behind them are taken from How to Make Responsive Iframes — it’s easy! and from Scaling iframes for responsive design CSS-only.
One salient point is to remove all styling from the <iframe> tag. Style with CSS only, with the exception of overflow-scrolling and overflow which are styled inline in the <div> wrapper around the <iframe>. Another point is to set width and height be setting max-width and max-height in the <div> wrapper around .responsive-wrapper.
The outer most <div> is not necessary; it's just there to show the effects of padding and border.
To position the iframe left you might use flex box instead of float.