How to change video controls size? - javascript

on first screenshot video player have normal controls
but second video player on the website with same css shows controls like this
// css
#videotag{
position: relative;
top: 0;
bottom: 1vw;
width: 100%;
height: 100%;
outline: none;
}

You don't have to declare the css as id (#videotag). So you can only use it fore ONCE element (in your example for the first video).
You have to create it as a class (.videotag), so you can use the css settings multiple times.
.videotag{
position: relative;
top: 0;
bottom: 1vw;
width: 100%;
height: 100%;
outline: none;
}
For more information look here

The video player will be responsive and scale up and down If the width property is set to 100%
video {
width: 100%;
height: auto;
}
And if you want to prevent video player to scale up to be larger than its original size than you can use max-width property for it:
video {
max-width: 100%;
height: auto;
}

Related

How to align and clip overlay to match iframe video?

I'm trying to align to make some custom ''video player'' thingy based around two iframes acting as double buffers and an overlay that will allow users to perform custom actions, similar to Coursera's modal questions.
All this will be exposed later through and uri that will be used in an external iframe (yea, i know)
The issue i'm facing is that i need the overlay to always match the video inside the iframes but the iframes themselves seem to be bigger than the actual video. For example, by assigning width: 100% to the iframes i manage to get a consistent result accessing this component through another iframe (the one that will be used in the website).
Current html structure using VueJs
<div id="action-player">
<!-- Interactive layer -->
<div class="a-overlay-layer">
<slot name="overlay-layer"></slot>
</div>
<!-- iFrame double buffer -->
<div class="a-iframe-layer">
<div id="buffer0" :class="['a-frame-buffer', { 'a-frame-buffer__active': bufferState.active === 0 }]"></div>
<div id="buffer1" :class="['a-frame-buffer', { 'a_frame-buffer__active': bufferState.active === 1 }]"></div>
</div>
</div>
Both buffers are being instanced by vimeo player. Currently in the slot for the overlay i just have a background:red element covering the screen;insira o código aqui
.a_player {
position: relative;
width: 100%;
height: 100%;
// padding-top: 56.25%; // //Aspect ratio 16:9
}
.a-overlay-layer {
position: absolute;
display: block;
float: right;
height: 100%;
width: 100%;
z-index: 2147483647;
pointer-events: none;
// background: transparent;
}
.a-iframe-layer {
position: relative;
width: 100%;
height: 100%;
}
.a-frame-buffer {
position: absolute;
z-index: 99;
display: block;
height: 100%;
width: 100%;
// vimeo iframe
iframe {
height: 100%;
width: 100%;
}
}
.a-frame-buffer__active {
z-index: 100 !important;
animation: smoothTransition 0.425s linear 0s 1 normal both;
}
The double buffer works fine, i just need to find a way to keep the overlay matching the video size not the whole iframe, which i thin, i defaulting to the whole screen cause of width: 100%.
Appreciate the help! o/

Trying To Create A Video Landing Page Using CSS

I am trying to replicate the Landing Page used on X Theme's Integrity 1, but I run into difficulty figuring out a way to keep the video full screen and focused at the center without making it the entire background. I have tried:
<style type="text/css">
body {margin: 0; padding: 0; background-color: green;}
#landing {margin: 0; padding: 0; top:0; left: 0; height: 100%; width: 100%; position: absolute}
video {top:0; left:0; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; bottom: 0;}
</style>
<body>
<div id="landing">
<video id="sey" src="seydrone.mp4#t=57,286" preload="auto" autoplay="true" muted="muted" loop="loop" type="video/mp4"></video>
<span id="welcome">DISCOVER NATURE'S SECRETS</span>
</div>
</body>
When the browser is in full-screen, it works perfect, but upon shrinking the page the landing video does not respond as per the X Theme demo does. I intend to place my nav-bar as per the demo and scroll down just the same which is why the background option is not possible.
Any help/suggestions would be thoroughly appreciated.
They have used some JavaScript for that, but there is a way to do it without JS.
Change your video styles to this:
video {
// Force video to cover screen
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
// Center video
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

CSS positioning/resizing html5 video background

Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}

CSS margin-top and top are not bound

I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?
Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.
I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}

Categories