Overlap two video to make one video with opacity [closed]
there are 2 videos and one picture. Videos have to be streamed as an overlay over the picture with opacity using HTML5, javascript, and css. I have studied library documents. But still didn't succeed. This Is my Css Javascript and Html File. You have to use the only javascript. I am trying to make a video banner for a website
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
callout
position: relative;
overflow: hidden;
.video-bg,
.video-overlay
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
.video-overlay
background: rgba(0,0,0,0.5);
pointer-events: none; /* Allows right clicking on the video to pause etc */
.video-bg video
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.callout-content
position: relative;
text-align: center;
margin: 50px 0; /* This adds some space around the video */
color: #FFF;
text-shadow: 0 0 5px rgba(0,0,0,0.4);
</style>
<title>videojs-overlay Demo</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-overlay.css" rel="stylesheet">
</head>
<body>
<section class="callout">
<div class="video-bg">
<video autoplay loop muted poster="path/to/poster.jpg">
<source src="dog.mp4" type="video/mp4">
<source src="tree.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"></div>
<div class="callout-inner">
<!-- Our callout content goes here -->
</div>
</section>
</body>
</html>
javascript jquery css html5 reactjs
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
closed as too broad by Shiladitya, Tiny Giant, Gerhard Barnard, Vivek Mishra, Unheilig Nov 14 '18 at 9:02
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
there are 2 videos and one picture. Videos have to be streamed as an overlay over the picture with opacity using HTML5, javascript, and css. I have studied library documents. But still didn't succeed. This Is my Css Javascript and Html File. You have to use the only javascript. I am trying to make a video banner for a website
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
callout
position: relative;
overflow: hidden;
.video-bg,
.video-overlay
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
.video-overlay
background: rgba(0,0,0,0.5);
pointer-events: none; /* Allows right clicking on the video to pause etc */
.video-bg video
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.callout-content
position: relative;
text-align: center;
margin: 50px 0; /* This adds some space around the video */
color: #FFF;
text-shadow: 0 0 5px rgba(0,0,0,0.4);
</style>
<title>videojs-overlay Demo</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-overlay.css" rel="stylesheet">
</head>
<body>
<section class="callout">
<div class="video-bg">
<video autoplay loop muted poster="path/to/poster.jpg">
<source src="dog.mp4" type="video/mp4">
<source src="tree.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"></div>
<div class="callout-inner">
<!-- Our callout content goes here -->
</div>
</section>
</body>
</html>
javascript jquery css html5 reactjs
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
closed as too broad by Shiladitya, Tiny Giant, Gerhard Barnard, Vivek Mishra, Unheilig Nov 14 '18 at 9:02
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
there are 2 videos and one picture. Videos have to be streamed as an overlay over the picture with opacity using HTML5, javascript, and css. I have studied library documents. But still didn't succeed. This Is my Css Javascript and Html File. You have to use the only javascript. I am trying to make a video banner for a website
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
callout
position: relative;
overflow: hidden;
.video-bg,
.video-overlay
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
.video-overlay
background: rgba(0,0,0,0.5);
pointer-events: none; /* Allows right clicking on the video to pause etc */
.video-bg video
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.callout-content
position: relative;
text-align: center;
margin: 50px 0; /* This adds some space around the video */
color: #FFF;
text-shadow: 0 0 5px rgba(0,0,0,0.4);
</style>
<title>videojs-overlay Demo</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-overlay.css" rel="stylesheet">
</head>
<body>
<section class="callout">
<div class="video-bg">
<video autoplay loop muted poster="path/to/poster.jpg">
<source src="dog.mp4" type="video/mp4">
<source src="tree.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"></div>
<div class="callout-inner">
<!-- Our callout content goes here -->
</div>
</section>
</body>
</html>
javascript jquery css html5 reactjs
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
there are 2 videos and one picture. Videos have to be streamed as an overlay over the picture with opacity using HTML5, javascript, and css. I have studied library documents. But still didn't succeed. This Is my Css Javascript and Html File. You have to use the only javascript. I am trying to make a video banner for a website
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
callout
position: relative;
overflow: hidden;
.video-bg,
.video-overlay
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
.video-overlay
background: rgba(0,0,0,0.5);
pointer-events: none; /* Allows right clicking on the video to pause etc */
.video-bg video
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.callout-content
position: relative;
text-align: center;
margin: 50px 0; /* This adds some space around the video */
color: #FFF;
text-shadow: 0 0 5px rgba(0,0,0,0.4);
</style>
<title>videojs-overlay Demo</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-overlay.css" rel="stylesheet">
</head>
<body>
<section class="callout">
<div class="video-bg">
<video autoplay loop muted poster="path/to/poster.jpg">
<source src="dog.mp4" type="video/mp4">
<source src="tree.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"></div>
<div class="callout-inner">
<!-- Our callout content goes here -->
</div>
</section>
</body>
</html>
javascript jquery css html5 reactjs
javascript jquery css html5 reactjs
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
edited Nov 14 '18 at 3:20
Munna Kumar
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
asked Nov 14 '18 at 3:07
Munna KumarMunna Kumar
37
37
closed as too broad by Shiladitya, Tiny Giant, Gerhard Barnard, Vivek Mishra, Unheilig Nov 14 '18 at 9:02
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Shiladitya, Tiny Giant, Gerhard Barnard, Vivek Mishra, Unheilig Nov 14 '18 at 9:02
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think you need to simplify.
opacity appears to work.
#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>answered Nov 14 '18 at 4:04
WillWill
1,79411111
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you need to simplify.
opacity appears to work.
#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>answered Nov 14 '18 at 4:04
WillWill
1,79411111
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
add a comment |
I think you need to simplify.
opacity appears to work.
#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>answered Nov 14 '18 at 4:04
WillWill
1,79411111
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
add a comment |
I think you need to simplify.
opacity appears to work.
#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>answered Nov 14 '18 at 4:04
WillWill
1,79411111
I think you need to simplify.
opacity appears to work.
#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>#video
position: absolute;
top: 0;
left: 0;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>answered Nov 14 '18 at 4:04
WillWill
1,79411111
answered Nov 14 '18 at 4:04
WillWill
1,79411111
answered Nov 14 '18 at 4:04
WillWill
1,79411111
answered Nov 14 '18 at 4:04
WillWill
1,79411111
1,79411111
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
add a comment |
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
It doesn't autoplay. Is their any cdn to call something. @will
– Munna Kumar
Nov 14 '18 at 20:07
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
Works in Safari. ¯_(ツ)_/¯
– Will
Nov 14 '18 at 22:16
add a comment |
