How to make a background text appear under youtube video? - html

There is a horizontally centered youtube video on the page, but the problem is that on mobile devices (phones/tablets) it takes time before the the video loads (sometimes 1.5 secs). So during this time the area which is designated for a video appears to be blank. So people might think that there is nothing there and move on.
So I tried to make a background text (underneath the video) saying 'Video is loading'. After looking how to make background text, I found the following answer. I tried both approaches (with ::before and with another div inside, but with no success).
Here is my fiddle with the closest I was able to get. Opacity there is just to see that the text is behind the video. And here is my failed part of CSS (just here because SO reject posts without code and with jsfiddle).
.video-preloader{
position: relative;
text-align:center;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}

Since the targeted element, .video-preloader is absolutely positioned, it's important that the parent element, .video is relatively positioned.
.video {
/* .. */
margin:0 auto;
position:relative;
}
In order to vertically/horizontally center the text, you could use the following approach. It works with dynamic text of varying dimensions (example)..
EXAMPLE HERE
.video-preloader {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
z-index: -1;
overflow: hidden;
}
.video-preloader > span {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
width:100%;
top: 50%;
left: 0;
}
Alternatively, if you want is a background image with a loading .gif, something like this would work:
EXAMPLE HERE
.video-preloader {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
z-index: -1;
overflow: hidden;
background: url('http://i.stack.imgur.com/w28B4.gif') 50% 50% / 80px 80px no-repeat;
}
You can easily modify the background-position/background-size properties within the shorthand property. In this case, the image is centered with background-position: 50% 50%..

Related

Body Images show on top of overlay

I've used technique described by fcalderan here to prevent body scrolling, but allow overlay scrolling.
I've used first method which "works by changing the aria-hidden attribute of the overlay in order to show and hide it and to increase its accessibility."
It works, however some of the body images are appearing on top of overlay(overlay is not working completely). Can't figure our what's the problem. Could you please help?
Here is codepen. I've included practically all page cause I don't know here the problem is. (Also on codepen the body background is still scrolling, but on local host it's working correctly)
To trigger pop-up click "POP-UP TRIGGER BLOCK"
CSS
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
Add the z-index property with some high enough value to the .overlay div, e.g.:
.overlay {
position: fixed;
overflow-y: scroll;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999;
}

Creating picture frame by repeating a smaller image

I've started working on an app that does image processing and image cropping, using a library called cropper.js. Right now, I've been tasked with investigation and possible implementation of a feature that would take the cropped image and create a visual representation of how a picture frame would look like.
Example:
The difference is, I'm not able to use already stored images, but have to build this type of image using one piece of image that will look like this:
Along with that, I have to somehow cut the side of the image piece under 45 degree angle to be able to reproduce the desired effect.
How would one go about doing this? I've thought of repeating that image piece a couple of times on all four sides, and then somehow cutting the far side parts of the image under 45 degree angle, but have no idea how to go about this :(
Thanks!
The simplest way with pure CSS is taking advantage of multiple-backgrounds for the main frames using 2 images, one vertical and the other is horizontal.
As for the corners, you only need one image of a transparent 45 degrees cut square texture, which will be used in 4 divs, each one is flipped through transform: scale() and positioned to the sides using position: absolute;
.picframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('http://i.stack.imgur.com/wyp42.png'), /* top */
url('http://i.stack.imgur.com/wyp42.png'), /* bottom */
url('http://puu.sh/q3NmA/48c4271f4f.jpg'), /* left */
url('http://puu.sh/q3NmA/48c4271f4f.jpg'); /* right */
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
}
.picframe [class^="corner"] {
background: url(http://i.imgur.com/W0Be4ra.png) no-repeat;
height: 62px; width: 62px;
position: absolute;
}
.picframe .corner-t-l {
top: 0;
left: 0;
}
.picframe .corner-t-r {
top: 0;
right: 0;
transform: scale(-1,1);
}
.picframe .corner-b-l {
bottom: 0;
left: 0;
transform: scale(1,-1);
}
.picframe .corner-b-r {
bottom: 0;
right: 0;
transform: scale(-1,-1);
}
<div class="picframe">
<div class="corner-t-l"></div>
<div class="corner-t-r"></div>
<div class="corner-b-l"></div>
<div class="corner-b-r"></div>
</div>
Pros:
Easy to implement
Responsive
Minimal code
Cons:
Might not be the most accurate
Requires creation of 3 images: vertical, horizontal, corner
Requires knowledge of frame size (for corners height/width)
If a one-piece texture is your only option, then you can flip the background by using CSS transform (90 degrees rotation or mirroring with negative scale scale(1,-1) for the main frames (top, bottom, left, right).
The corners are bit more complicated and can be done by making a div that is rotated 45 degrees and has a child or pseudo selector inside that reverses the parent's rotation then applies the background, then hiding the excess with overflow: hidden on the parent corner container:
:root {
--frame-size: 160px;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
[class^="frame"] {
background: url("https://i.gyazo.com/6836b6d12cebf4b0fd9a2758ad3a04a9.png");
position: absolute;
/*outline:1px solid rgba(255,0,0,0.5);*/
}
.frame--top,
.frame--bottom {
width: 100%;
height: var(--frame-size);
top: 0;
left: 0;
}
.frame--bottom {
top: auto;
bottom: 0;
transform: scale(1, -1);
}
/* optional shading for realism */
.frame--top::after,
.frame--bottom::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: RGBA(0, 0, 0, 0.1);
box-shadow: inset 0px 10px 50px rgba(0, 0, 0, 0.25);
}
.frame--left,
.frame--right {
height: var(--frame-size);
width: calc( 100vh - (var(--frame-size)*2));
z-index: 1;
bottom: 0;
left: 0;
transform-origin: 0% 0%;
transform: rotate(-90deg);
}
.frame--right {
bottom: var(--frame-size);
right: var(--frame-size);
left: auto;
transform-origin: bottom right;
transform: rotate(90deg);
}
[class^="frame--corner"] {
height: calc(var(--frame-size)* 1);
width: calc(var(--frame-size) * 1.425);
background: inherit;
overflow: hidden;
left: 0;
top: 0;
z-index: 1;
transform: rotate(45deg);
transform-origin: 0 0;
}
[class^="frame--corner"]::before {
content: '';
position: absolute;
background: inherit;
height: 100%;
width: 100%;
transform: rotate(-135deg);
right: 0;
top: -50%;
}
.frame--corner--tr,
.frame--corner--br {
right: 0;
left: auto;
transform: rotate(-45deg);
transform-origin: 100% 0%;
}
.frame--corner--tr::before,
.frame--corner--br::before {
transform: rotate(135deg);
}
<div class="frame--top">
<div class="frame--corner--tl"></div>
<div class="frame--corner--tr"></div>
</div>
<div class="frame--bottom">
<div class="frame--corner--bl"></div>
<div class="frame--corner--br"></div>
</div>
<div class="frame--left"></div>
<div class="frame--right"></div>
jsFiddle: https://jsfiddle.net/azizn/cb7feu5p/2/
Pros:
Single image (texture)
Responsive
Frame size can be dynamic
Cons:
Might not be the most accurate
Larger amount of code and 8 HTML tags
For this to work as pure CSS, many calculations use a CSS variable (--frame-size), please be sure to check browser compatibility for CSS variables, transforms and calc() expressions. Otherwise, you will need to run all these operations through JavaScript.
You can use the border-image property for this, it should work perfectly for what you're trying to do. It will use the corners of the image for the corners, and will stretch or repeat what is in-between. You can also define the border-width for each border as normal.
The advantage to this method is that it works just like any normal border, therefore there is no worry about scaling or keeping the content always the same size, it will adapt nicely according to the content.
This is how the code would look like, excluding extra code for full browser support:
border-image: url("border.png") 27 fill repeat;
Here's some handy links for browser support & guides:
http://caniuse.com/#search=border-image (I think partial support issues will not be relevant to your case though, as long as you use the shorthand)
https://css-tricks.com/understanding-border-image/
This site makes it really easy to define your borders from the images, as it can be a bit of a pain to count it all manually:
http://border-image.com/

Trouble with overlaying images in CSS

I'm trying to overlay 5 images that are all the same size, namely 614 w x 814 h. Because parts of each image are transparent, together they make one whole picture. I can't use my original images to show you because they've got personal data on them. Instead I used color blocks to show you an example I've made.
Fiddle
I'm trying to center all of the images in the center of the screen, and it's crucial that they remain there, no matter how far the browser is zoomed in, or if the window is resized. To do that, I use this code per image:
#blue{
margin-top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
}
My question is: How do I center these 5 images in the middle of the screen, having all them overlay eachother like so; blue < green < purple < yellow < red. And still keep them positioned so that there's no space between each image, so that they may form one block of five different colors?
Is there an easier, more accurate way of doing this than what I've shown you in the fiddle?
I found out a solution. I used this code per color block, which was what I needed
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
Put them all in a single div and center that - Paulie_D
Cenctered container with image(s).
html {
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container img {
position: absolute;
top: 0;
left: 0;
}
.container img:nth-of-type(1) {
position: relative;
}
<div class="container">
<img src="http://lorempixel.com/g/100/100" />
<!--place images here!-->
</div>

Centered lightbox with dynamic height

I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.

How can I make a div that spans the entire height of the document, even when it contains no content?

I’d like to have a div called “content” which starts at the top of the page and extends down to the bottom, even when there’s no other content. I’m trying to figure out how to do this using very simple CSS, so I can implement it on my existing site. Here's the code I’ve been playing with:
html {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
#content
{
position: relative;
top: 0;
margin: 0 auto;
border: 1px solid red;
width: 70%
}
This will make a div, but it ends up being pretty much just a red line at the top of the screen. If I add height: 900px; then it will work, but I’m trying not to use specific measurements.
Use min-height:100% so that it can grow if it has to, and remove all other rules (they're not doing anything).
How about #content { height: 100%; ... }?