Develop Reference

How to shrink an iframe inside a div to match its width?

What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.

Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}

Display A4 pdf in div responsive with HTML/CSS

EDIT: I solved it: it was in the settings of the pdf that I needed to change the mode to 'Page Fit'
I try to display a pdf in a div that is exactly a half of my screen.
I don't want to have to scroll to see the single A4 pdf page.
When I resize the screen I also wan't the pdf to get bigger/smaller.
The problem is that the embeded pdf is not resizing itself and it is scrollable.
CSS:
split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.left {
left: 0;
background-color: blue;
}
embed#pdf {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
HTML:
<div class="split left">
<embed id="pdf" src="my_pdf.pdf" type='application/pdf'>
</div>
I have tried to use the tag, but I get the same result.
Thank you for your help!

I solved it: it was in the settings of the pdf that I needed to change the mode to 'Page Fit'

Scrolling on Android Mobile not working

I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/

The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.

How to embed full screen responsive YouTube video with custom height

I'm trying to embed a YouTube video and have found a few answers here on how to accomplish that however, when I embed the video I would like to add a custom height of 500px to the iframe. The idea is to maintain the aspect ratio but the iframe (visible area) of the video is smaller in height. I don't mind if the top and bottom is cut off (not fully visible) so long as the height is 500px and it remains full width with no black bars on the sides of the video.
This is what I have but don't know how to tweak the height without black bar appearing.
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>

You'd be able to tweak the height of the container by changing the padding-bottom value. But adding a fixed height will eventually show black bars at some point.

Like this?
.embed-container {
width: 500px;
height: 375px;
overflow: hidden;
position: relative;
}
.mask {
position: absolute;
width: 500px;
height: 50px;
background-color: red;
z-index: 1;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class='embed-container'>
<div class="mask top"></div>
<iframe width="500" height="375" src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe>
<div class="mask bottom"></div>
</div>

Fullscreen video without black borders

The problem I have is that the video always gets black bars on the sides or on the top/bottom depending on the screen size.
Any idea how to get it full screen always without showing that annoying black bars? and without using a plugin.
This is my markup:
<div id="full-bg">
<div class="box iframe-box" width="1280" height="800">
<iframe src="http://player.vimeo.com/video/67794477?title=0&byline=0&portrait=0&color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
#full-bg{
width: 100%;
height: 100%;
img{
display: none;
}
.iframe-box{
width: 100%;
height: 100%;
position: absolute;
background: url(../img/fittobox.png);
left: 0 !important;
top: 0 !important;
iframe{
width: 100%;
height: 100%;
}
}
}

Try adding to your CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
This means that width: 100%; height: 100% will let the element will expand as much as it can, until it hits a maximum height or width of 720px or 1280px, respectively.
If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.
Further, afaik the following is not valid CSS, are you using a library or something?
#full-bg {
.iframe-box {
foo: bar;
}
}
Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS
.fittobox { /* give fit to box an aspect ratio */
display: inline-block; /* let it be styled thusly */
padding: 0; /* get rid of pre-styling */
margin: 0;
width: 100%; /* take up full width available */
padding-top: 56.25%; /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
height: 0px; /* don't want it to expand beyond padding */
position: relative; /* allow for absolute positioning of child elements */
}
.fittobox > iframe {
position: absolute; /* expand to fill */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}

If you know the aspect ratio of your video, you shouldn't even need Javascript. You can use a percentage-based padding-top.
I could post code, but I'd recommend you read this entire article anyway.

#Paul S. 's answer works for me for the .fittobox container for 16:9 video aspect ratios but the .fittobox > iframe embed still has black bars with his CSS. Removing the right and bottom positioning fixes it for me (no need for "px" in those 0 values, of course):
.fittobox > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}