This question already has answers here:
Full-screen iframe with a height of 100%
(20 answers)
Closed 7 years ago.
I going to make a website that has a video as a background.
I want to load the video from vimeo but I havent found the best way to put it fullscreen.
i´m trying to add a css to the iframe but it doesn´t work at all:
iframe{
width: 100%;
height: 100%;
}
Do any of you know the best way to embed it as a background without using plugins or html5 to avoid problems with IE.
thank you!
Here you go: Demo
Wrap it in a div and set that also to 100%, 100%
iframe, div {
width: 100%;
height: 100%;
}
HTML:
<iframe src="vimeo.path"></iframe>
<div id="container"></div>
CSS:
body {
overflow: hidden;
}
iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
DEMO:
http://jsbin.com/utezov/4/embed?live
<iframe src="http://player.vimeo.com/video/47922974" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>Jape 'Scorpio' from Fergal Brennan on Vimeo.</p>
Now i just took a video from vimeo.
maybe set a class to the iframe like
<iframe class="fullvideo">
and set the css like:
iframe.fullvideo {
width: 100%;
height: 100%;
}
Try to use an ID to identify this bg iframe:
<iframe id="bgiframe">...</iframe>
and redefine this iframe in this way:
html, body, p, div, span, table, td
/* Add other elements... These are explicit defined since ie6/7 doesn't support * selector */
{
z-index: inherit;
background: transparent; /* this is important to see-through normal elements */
}
#bgiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding 0;
margin: 0;
border: 0;
width: 100%; height: 100%;
z-index: -1;
}
z-index: -1; is for take this element under every other elements.
background: transparent; for every other elements is to see through and see video as background.
This can be an example:
http://jsfiddle.net/4KHET/2/
Related
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);
}
I have a problem that I've spent the better part of half a day trying to solve with no real solution I'm happy with. I have a carousel which contains a placeholder image for a youtube video, and when you click on it the placeholder image is removed and is replaced by the youtube video, but as the aspect ratio of the placeholder image is different from the video, and I need this to work responsively, I need to increase the percentage of the padding of the div these sit in when the user clicks (or taps) on the div.
So, my HTML for this div looks as such:
<div class="youtube_video">
<img src="img/video_poster_carousel.jpg" width="986" height="308">
<!-- <iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" frameborder="0" allowfullscreen></iframe> -->
</div>
And the CSS:
/* video */
.youtube_video { position: relative; padding-bottom: 31.65%; height:0; }
.youtube_video img { position: absolute; display: block; top: 0; left: 0; /*width: 100%; height: 100%;*/ z-index: 20; cursor: pointer; }
.youtube_video:after { content: ""; position: absolute; display: block;
background: url(play-button.png) no-repeat 0 0;
top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }
.youtube_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* image poster clicked, player class added using js */
.youtube_video.player img { display: none; }
.youtube_video.player:after { display: none; }
And the Javascript being used right now:
$(function() {
var videos = $(".youtube_video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
Basically, I need to increase the padding-bottom on .youtube_video from 31.65% to 56.25% (16:9 ratio) upon clicking on the div. I'm probably missing something obvious, but Javascript/jQuery isn't my strongest point. Any help would be appreciated.
Try adding this to your click function?
$('.youtube_video').css('padding-bottom','56.25%');
JQuery CSS
DEMO
If you have the width of the <iframe> you can allways set its size and animate it with jquery.
$('.video-container').animate({
width:'200px',
height:'200px',
});
I have a to slow fadeIn effect when I tring to show simple popup by clicking on button. Without video all of it works fine.
Video on my page have a 100% size and fixed position
video#bgvid{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Also, there is a popup html code
<div class="blackpopup">
<div class="container">
</div>
</div>
And css:
.blackpopup{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.58);
}
Javascript code is simple:
var popUpThank = jQuery(".blackpopup");
var submitButton = jQuery("#submit");
submitButton.click(function(e){
e.preventDefault();
popUpThank.fadeIn();
});
So, how to make it not so slow and where is the problem?
The answer is: not saturating the browser's memory with a hell of a heavy video.
Try doing the same removing the video tag it will work.
Compress it better, or with low quality as it's a background object.
I can point you to sorenson squeeze app for that.
I'm trying to implement Stellar.js (http://markdalgleish.com/projects/stellar.js/) to a site that I'm developing. I realised that I need to enclose the parallax scrolling inside a container instead of using window/body in order for it to work on an iPad (considering the viewport) and that's where I run into a problem; the script doesn't seem to initiate correctly.
Here's the structure I've setup on the site -
HTML
<header></header>
<!-- keeping this content outside of #content because of a prefixed alignment -->
<div id="content">
<section id="example" data-stellar-background-ratio="1">
<img src="example-1.png" data-stellar-ratio="2" data-stellar-offset="-25">
<img src="example-2.png" data-stellar-ratio="3" data-stellar-offset="-50">
<img src="example-3.png" data-stellar-ratio="4" data-stellar-offset="0">
</section>
</div>
CSS
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section {
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
}
img:first-child {
position: absolute;
top: 0;
left: 300px;
}
img:nth-child(2) {
position: absolute;
z-index: 99;
top: 0;
right: 150px;
}
img:nth-child(3) {
position: absolute;
z-index: 99;
top: 0;
left: 100px;
}
JavaScript
$('#content').stellar({
horizontalScrolling: false
});
I can see that the parallax images inside the section get display: none, but other than that the script doesn't seem to be running. I get no JS errors.
I'm thinking it might have something to do with you using position: absolute and not giving the div any with.
Did you check the size of your #content div? Or does stellar handle this too?
I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but only for when the videobox is on.
I have no idea where to start though.
You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.
You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)
The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?
in videobox.js
replace line 80
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
with this:
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});
Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.