Resize iframe pic to match the layout - javascript

Is there any way to resize the picture on the right because the actual GIF is 500x500px and it is only showing 100x100px but at the same time keep the layout design like it is? Any help would be extremely apreciated!
What I have now (Demo w/ code): http://jsfiddle.net/dkfn482L/
body {
margin: 0;
}
.t_container::after {
clear: both;
}
.t_iframe {
position: relative;
float: left;
}
.t_iframe iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.t_video {
width: 64%;
padding-top: 36%;
}
.t_image {
width: 36%;
padding-top: 36%;
}
#media (max-width: 768px) {
.t_iframe {
float: none;
width: 100%;
}
.t_video {
width: 100%;
padding-top: 36%;
}
.t_image {
width: 100%;
padding-top: 100%;
object-fit: cover;
}
}
<div class="t_container">
<div class="t_iframe t_video">
<iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="t_iframe t_image">
<iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>

You can give the Iframe 'width' & 'height' attribute and set fixed value.
however, your CSS override the iframe natural width:
.t_image {
width: 36%;
padding-top: 36%;
}
Try to add <img> element to the iframe and give it a minimum values for height and width.

Related

why I can not put button element while parent have height with percent?

I have a div with 15% height (height: 15%;)
I can not put set span button of this div. If I use height: 300px; it works well. but with percent height does not work. why?
#parent {
height: 15%;
position: relative;
}
span {
position: absolute;
bottom: 0;
}
You can fill the height of the body by using 100vh;
body {
height: 100vh;
}
#parent {
position: relative;
width: 15%;
height: 15%;
background-color: red;
}
span {
position: absolute;
color: white;
text-align: center;
width: 100%;
bottom: 0;
}
<div id="parent">
<span>Hello</span>
</div>

how do I set my Iframe in screen for mobile devices

My css for Iframe:
position: absolute;
right: 0;
top: -100px;
z-index: 1;
height: 110%;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
This is my CSS for Iframe screen on my website, but in mobile devices, I have to scroll the Iframe screen to see the full website.
Note: making the iframe responsive is not in my hand.
The bootstrap method. Use an iframe or video element in it.
<div class="embed-16by9">
<iframe src="..."></iframe>
</div>
with responsive css
embed-16by9 {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-16by9::before {
display: block;
content: "";
padding-top: 56.25%; /* ratio 16:9 */
}
.embed-16by9 iframe,
.embed-16by9 video {
width: 100%;
border: 0;
position: absolute;
top: 0; bottom: 0; left: 0;
height: 100%;
}

YouTube Video appearing in wrong spot when playing 2nd time on page

I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

Internet explorer viewport width units error with img tag

So I've made a page intro , in which there are to svg files , one inside which is colored a figure and another out which is only outlined. The figure has an overflow hidden and it has an animation to increase it's width.
Something like this:
<div>
<figure> <img /> </figure> <-- Overflow hidden>
<img /> <-- Only borders
</div>
It looks good on all browsers but IE
And I've been playing with the widths of all the containers but I couldn't make it fit and make it responsive. Any idea ?
(jsFiddle)
$(window).ready(function() {
$('figure').animate({
width: "100vw",
}, 3000, function() {});
});
body {
background-color: red;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
html {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#loading {
height: 100%;
width: 50vw;
}
#loading figure {
position: absolute;
overflow: hidden;
width: 0vw;
margin: 0;
padding: 0;
height: 100%;
}
#loading img {
width: 50vw;
position: absolute;
top: 0;
}
#loading h4 {
text-align: center;
color: #fff;
font-size: 3em;
font-weight: 300;
position: absolute;
top: 25vh;
width: 50vw;
z-index: 2;
}
<body>
<div id="loading">
<figure>
<img src="http://imgh.us/test-color.svg">
</figure>
<img src="http://imgh.us/test_68.svg">
</div>
</body>
Add 100% height on #loading img
#loading img {
height: 100%;
...
}

How to resize iframe when parent window resizes

I don't think this is not another "resize iframe according to content height" question.
I actually want to resize the iframe dynamically according to a resize of the parent window. For JS Fiddle fans I have an example here
For those who want to look at the code on SO:
<div id="content">
<iframe src="http://www.apple.com"
name="frame2"
id="frame2"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="auto"
allowtransparency="false">
</iframe>
</div>
<div id="block"></div>
<div id="header"></div>
<div id="footer"></div>
CSS:
body {
margin: 0px;
padding-top: 78px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
min-height: 0px;
height: auto;
text-align: center;
background-color: lightblue;
overflow:hidden;
}
div#header {
top: 0px;
left: 0px;
width: 100%;
height: 85px;
min-width: 1000px;
overflow: hidden;
background-color: darkblue;
}
div#footer {
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
min-width: 1000px;
background-color: darkblue;
}
iframe#frame2 {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
div#block {
background-color: lightgreen;
margin: 40px;
position: fixed;
top: 80px;
left: 350px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
#media screen {
body > div#header {
position: fixed;
}
body > div#footer {
position: fixed;
}
}
There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.
As you can see the green coloured div dynamically changes height accordingly when you resize the window. What I'd like to find out is if this can be done with the iframe to the left of the div.
Can CSS alone make this happen?
I created a new jsfiddle that gets you what you need in raw css. I didn't test cross-browser extensively, particularly in IE. I would anticipate support in IE8 and 9, but would be hesitant to say that 7 would work without hiccups.
The relevant changes:
/* This contains the iframe and sets a new stacking context */
div#content {
position: fixed;
top: 80px;
left: 40px;
bottom: 25px;
min-width: 200px;
background: black;
/* DEBUG: If the iframe doesn't cover the whole space,
it'll show through as black. */
}
/* Position the iframe inside the new stacking context
to take up the whole space */
div#content iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
I think this does what you're after.
First I wrapped the iframe in a div, and set the iframe's width and height to be 100%.
HTML
<div id="frameContainer"><iframe src="http://www.apple.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe></div>
CSS
#frameContainer {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
iframe#frame2 { width: 100%; height:100% }
Then I added the following jQuery code.
jsFiddle
$(function() {
var widthRatio = $('#frameContainer').width() / $(window).width();
$(window).resize(function() {
$('#frameContainer').css({width: $(window).width() * widthRatio});
});
});
You can set the width and height of the iframe element to be percentage-based. Here's an example where width is 75% and will dynamically change when you increase/decrease the width of your browser window: http://jsfiddle.net/fallen888/pkjEB/
This worked for me:
div#content iframe {width: 100%}

Categories