Responsive Iframe With Preserved Aspect Ratio [duplicate] - javascript

This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I am new to coding and community and i am trying to embed YouTube iframes responsively. So far all i do is replacing the original width value with 100%.
<iframe width="100%" height="315" src="https://www.youtube.com/embed/kXBunIe_PSw" frameborder="0" allowfullscreen></iframe>
Yes it makes it responsive since the height is static there are lots of black space. Is there any simple way to prevent this.
I prefer css solutions but javascript is also welcomed.

.videoWrapper {
position:relative;
padding-bottom:56.25%;
margin:auto;
height:0;
}
.videoWrapper iframe {
background-color:#f2f2f2;
position:absolute;
max-width:100%;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' src='https://www.youtube.com/embed/hhR3DwzV2eA' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
Let me know, if it does not work

This should help you get started.
Ref: Bootstrap
.responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.responsive iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.video {
padding-bottom: 56.25%; /* or 75% depending upon the type of video you have */
}
<div class="responsive video">
<iframe src="https://www.youtube.com/embed/kXBunIe_PSw" allowfullscreen></iframe>
</div>

Related

Html resize iframe automatically to device size

<div style="position:absolute; top:50px; left:0px">
<iframe style="border: none;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
How do you automatically resize an iframe to fit the device screen? I just started learning HTML and JS and CSS, so if I did not leave enough code just tell me. I'm only 11. Thanks.
In most modern browsers you can use vw and vh units which are equal to 1% of screen width and height respectively:
<div style="position:absolute; top:50px; left:0px">
<iframe style="border: none; width: 100vw; height: 100vh;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
If you are targeting old browsers, you can set width: 100%; height: 100%; for the iframe and its parent div:
<div style="position:absolute; top:50px; left:0px; width: 100%; height: 100%;">
<iframe style="border: none; width: 100%; height: 100%;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
Using
height: 100vh; width: 100vw;
CodePen
More info can be found here: Full-screen iframe with a height of 100% :)

Youtube video div overlay glitch

I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox
try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}

Blurry text when google map is embeded

This only happens on chrome (maybe all webkit browsers?) - when I embed the map like so:
<iframe
id="contactsMap"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?= $contact['imagePopupAddress'] ?>&aq=&sll=<?= $contact['mapLocation'] ?>&sspn=<?= $contact['mapLocation'] ?>&vpsrc=0&ie=UTF8&hq=&hnear=<?= $contact['imagePopupAddress'] ?>&t=m&z=16&ll=<?= $contact['mapLocation'] ?>&output=embed">
</iframe>
It shows up all nicely, but if I create a div that overlays the map, the text in that div shows up all blurry (and images too).
What I have tried:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide
{
-webkit-transform: none !important;
}
What else could I try?
Edit http://jsfiddle.net/31pxt917/
Blur happens because You are using skew transformation and then skew back. Better way would be using separate dom element, or pseudo element (:before or :after). Something like this fiddle
<div style="position: relative">
<iframe id="contactsMap" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=703 8th Ave&aq=&sll=40.758595, -73.988841&&sspn=40.758595, -73.988841&&vpsrc=0&ie=UTF8&hq=&hnear=703 8th Ave&t=m&z=16&ll=40.758595, -73.988841&output=embed"></iframe>
<div class="overlay">
<div class="content">
<span>some text goes here</span>
a random link
</div>
</div>
</div>
#contactsMap {
width: 100%;
float:left;
height:300px;
position:relative;
}
.overlay{height: 300px;}
.overlay:before {
content: '';
display: block;
width:100%;
height:150px;
background:#000;
color:#fff;
position:absolute;
bottom: 0;
-webkit-transform: skew(-9deg);
-moz-transform: skew(-9deg);
-o-transform: skew(-9deg);
transform: skew(-9deg);
}
.content {
top: 150px;
height: 150px;
width: 100%;
position: absolute;
padding: 5px 15px;
}
.overlay a, .overlay span {
color:#fff;
}

Adobe reader plugin html transparent overlay

Hi Im trying to overlay a pdf, rendered using adobe-reader plugin for IE11, with a div. Here is a jsfiddle describing my problem. The div is positioned behind the embedded pdf for some reason. Is there a solution to this problem? The problem occours in IE11.
The pdf is embedded like this with the div below it
<object id="pdf">
<embed src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"/>
</object>
<div id="overlay" />
Here os the css:
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: 1000;
}
#pdf {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks for your help.
Update! I managed to make the div overlay the pdf using an iframe. But I can't make the div transparent.
<iframe style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:9;" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"></iframe>
<div id="overlay" style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:10;"></div>
<iframe ALLOWTRANSPARENCY="true" style="position:absolute; left:0; top:0; width:50px; opacity: 0.0;
height:150px; z-index:9;"
srcdoc="<html><body style='background-color:transparent;'></body></html>"></iframe>
css remains the same.
A new js fiddle can be foudn here

How to hide/cover a certain part of an iframe

I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.
You must add a container/wrapper around the iframe. Try this:
CSS
.wrapper{
position:relative;
z-index: 1;
display: inline-block;
}
.hidelogo{
position: absolute;
width: 150px;
height: 40px;
background: #222;
right: 0px;
bottom: 6px;
z-index:999;
display: block;
color: #fff;
}
HTML
<div class="wrapper">
<div class="hidelogo"></div>
<iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>
DEMO HERE
Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this div
CSS
#Blocker{
position:absolute;
z-index:10;
right:10px;
bottom:5px;
height:15px;
width:100px;
background-color:orange;
}
#frame{
height:100%;
width:100%;
position:absolute;
}
#Wrapper{
height:100%;
width:auto;
border:solid red 2px;
}
HTML
<div id="Wrapper">
<iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
<div id="Blocker">
Logo Blocked
</div>
</div>
100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">

Categories