How do I add a video instead of a photo on top wrapper?CSS Layout with Pixel And PercentsVertical alignment of elements overlapping in IEHow can I add new array elements at the beginning of an array in Javascript?How to add a tooltip to an svg graphic?Remove margins in HTML5permanent 2x3 CSS image galleryHow to stick a div with background image to the top of the body that has padding-top?Flexible text container to auto resize based on contenthow to add this jquery script in to wordpress websiteCSS position:fixed is working for the header but not for the footer
Examples where existence is harder than evaluation
Can the president of the United States be guilty of insider trading?
Can you turn a recording upside-down?
Is there an idiom that means "revealing a secret unintentionally"?
Do Rabbis admit emotional involvement in their rulings?
Pre-1993 comic in which Wolverine's claws were turned to rubber?
Row vectors and column vectors (Mathematica vs Matlab)
When do you stop "pushing" a book?
resoldering copper waste pipe
Best species to breed to intelligence
Is there any evidence to support the claim that the United States was "suckered into WW1" by Zionists, made by Benjamin Freedman in his 1961 speech
How do carbureted and fuel injected engines compare in high altitude?
What is the Ancient One's mistake?
What's the "magic similar to the Knock spell" referenced in the Dungeon of the Mad Mage adventure?
Using wilcox.test() and t.test() in R yielding different p-values
Probability of taking balls without replacement from a bag question
Lorentz invariance of Maxwell's equations in matter
How can I test a shell script in a "safe environment" to avoid harm to my computer?
Can I bring back Planetary Romance as a genre?
Why use steam instead of just hot air?
Has everyone forgotten about wildfire?
Is there a need for better software for writers?
Was Mohammed the most popular first name for boys born in Berlin in 2018?
Names of the Six Tastes
How do I add a video instead of a photo on top wrapper?
CSS Layout with Pixel And PercentsVertical alignment of elements overlapping in IEHow can I add new array elements at the beginning of an array in Javascript?How to add a tooltip to an svg graphic?Remove margins in HTML5permanent 2x3 CSS image galleryHow to stick a div with background image to the top of the body that has padding-top?Flexible text container to auto resize based on contenthow to add this jquery script in to wordpress websiteCSS position:fixed is working for the header but not for the footer
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I would like to use a video on my top wrapper place instead of using a photo as background img.
I am really beginner of html5 & css3, so I am really sorry if my question isn't clear.
That would be really appreciate if someone could teach me how I can code to add a background video not as full screen type background, only for my top wrapper.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>CSS:
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
width: 1170px;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 180px 0 100px 0;
background-image: url(background-photo.jpg);
background-size: cover;
color: white;
text-align: center;
opacity: 0.8;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
.top-wrapper p
font-size: 25px;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
z-index: 10;
.logo
width: 124px;
margin-top: 20px;
.header-left
float: left;
.header-right
float: right;
transition: all 0.5s;
.header-right a
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
float: right;
.about-me
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
.heading
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
.heading h1
font-weight: normal;
.profile
float: left;
width: 25%;
.lesson-icon
position: relative;
.lesson-icon p
position: absolute;
top: 90px;
width: 100%;
color: white;
.txt-contents
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
.heading h3
font-weight: normal;
.message-wrapper
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
.message
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
.message:active
position: relative;
top: 7px;
box-shadow: none;
.bottom-btn-list
text-align: center;
footer p
color: #b3aeb5;
font-size: 12px;
margin: auto;
width: 50%;
padding: 30px;
text-align: center;
footer
padding-top: 30px;
text-align: center;
background-color: #333631
.my-skyblue
color: skyblue;
.my-white
color: white;
javascript css html5
asked Mar 23 at 8:43
Takashi Takashi
31
|
show 1 more comment
0
I would like to use a video on my top wrapper place instead of using a photo as background img.
I am really beginner of html5 & css3, so I am really sorry if my question isn't clear.
That would be really appreciate if someone could teach me how I can code to add a background video not as full screen type background, only for my top wrapper.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>CSS:
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
width: 1170px;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 180px 0 100px 0;
background-image: url(background-photo.jpg);
background-size: cover;
color: white;
text-align: center;
opacity: 0.8;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
.top-wrapper p
font-size: 25px;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
z-index: 10;
.logo
width: 124px;
margin-top: 20px;
.header-left
float: left;
.header-right
float: right;
transition: all 0.5s;
.header-right a
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
float: right;
.about-me
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
.heading
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
.heading h1
font-weight: normal;
.profile
float: left;
width: 25%;
.lesson-icon
position: relative;
.lesson-icon p
position: absolute;
top: 90px;
width: 100%;
color: white;
.txt-contents
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
.heading h3
font-weight: normal;
.message-wrapper
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
.message
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
.message:active
position: relative;
top: 7px;
box-shadow: none;
.bottom-btn-list
text-align: center;
footer p
color: #b3aeb5;
font-size: 12px;
margin: auto;
width: 50%;
padding: 30px;
text-align: center;
footer
padding-top: 30px;
text-align: center;
background-color: #333631
.my-skyblue
color: skyblue;
.my-white
color: white;
javascript css html5
asked Mar 23 at 8:43
Takashi Takashi
31
use avideotag with appropriate styling to put it in the background
– Jaromanda X
Mar 23 at 8:47
1
additional hint for @JaromandaX comment:<video>&.containershould haveposition absolute;and.top-wrapperposition: relative;
– davbuc
Mar 23 at 8:56
@davbuc - that's what I said ... appropriate styling :D - though the only thing left to consider is getting the video element sizing to follow the container
– Jaromanda X
Mar 23 at 9:13
@davbuc - don't make the container absolute, just the video absolute, and the top-wrapper relative, then make the video 100% width and height and it will take the dimensions of the container since now top-wrapper will be the size of container only
– Jaromanda X
Mar 23 at 9:19
.container width: 1170px; padding: 0 15px; margin: 0 auto; .top-wrapper position:relative; .top-wrapper video position:absolute; width:100%; height:100%; background:green; z-index:-1;
– Takashi
Mar 23 at 14:31
|
show 1 more comment
0
0
0
0
I would like to use a video on my top wrapper place instead of using a photo as background img.
I am really beginner of html5 & css3, so I am really sorry if my question isn't clear.
That would be really appreciate if someone could teach me how I can code to add a background video not as full screen type background, only for my top wrapper.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>CSS:
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
width: 1170px;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 180px 0 100px 0;
background-image: url(background-photo.jpg);
background-size: cover;
color: white;
text-align: center;
opacity: 0.8;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
.top-wrapper p
font-size: 25px;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
z-index: 10;
.logo
width: 124px;
margin-top: 20px;
.header-left
float: left;
.header-right
float: right;
transition: all 0.5s;
.header-right a
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
float: right;
.about-me
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
.heading
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
.heading h1
font-weight: normal;
.profile
float: left;
width: 25%;
.lesson-icon
position: relative;
.lesson-icon p
position: absolute;
top: 90px;
width: 100%;
color: white;
.txt-contents
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
.heading h3
font-weight: normal;
.message-wrapper
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
.message
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
.message:active
position: relative;
top: 7px;
box-shadow: none;
.bottom-btn-list
text-align: center;
footer p
color: #b3aeb5;
font-size: 12px;
margin: auto;
width: 50%;
padding: 30px;
text-align: center;
footer
padding-top: 30px;
text-align: center;
background-color: #333631
.my-skyblue
color: skyblue;
.my-white
color: white;
javascript css html5
asked Mar 23 at 8:43
Takashi Takashi
31
I would like to use a video on my top wrapper place instead of using a photo as background img.
I am really beginner of html5 & css3, so I am really sorry if my question isn't clear.
That would be really appreciate if someone could teach me how I can code to add a background video not as full screen type background, only for my top wrapper.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>CSS:
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
width: 1170px;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 180px 0 100px 0;
background-image: url(background-photo.jpg);
background-size: cover;
color: white;
text-align: center;
opacity: 0.8;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
.top-wrapper p
font-size: 25px;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
z-index: 10;
.logo
width: 124px;
margin-top: 20px;
.header-left
float: left;
.header-right
float: right;
transition: all 0.5s;
.header-right a
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
float: right;
.about-me
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
.heading
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
.heading h1
font-weight: normal;
.profile
float: left;
width: 25%;
.lesson-icon
position: relative;
.lesson-icon p
position: absolute;
top: 90px;
width: 100%;
color: white;
.txt-contents
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
.heading h3
font-weight: normal;
.message-wrapper
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
.message
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
.message:active
position: relative;
top: 7px;
box-shadow: none;
.bottom-btn-list
text-align: center;
footer p
color: #b3aeb5;
font-size: 12px;
margin: auto;
width: 50%;
padding: 30px;
text-align: center;
footer
padding-top: 30px;
text-align: center;
background-color: #333631
.my-skyblue
color: skyblue;
.my-white
color: white;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>javascript css html5
javascript css html5
asked Mar 23 at 8:43
Takashi Takashi
31
asked Mar 23 at 8:43
Takashi Takashi
31
asked Mar 23 at 8:43
Takashi Takashi
31
asked Mar 23 at 8:43
Takashi Takashi
31
asked Mar 23 at 8:43
Takashi Takashi
31
31
use avideotag with appropriate styling to put it in the background
– Jaromanda X
Mar 23 at 8:47
1
additional hint for @JaromandaX comment:<video>&.containershould haveposition absolute;and.top-wrapperposition: relative;
– davbuc
Mar 23 at 8:56
@davbuc - that's what I said ... appropriate styling :D - though the only thing left to consider is getting the video element sizing to follow the container
– Jaromanda X
Mar 23 at 9:13
@davbuc - don't make the container absolute, just the video absolute, and the top-wrapper relative, then make the video 100% width and height and it will take the dimensions of the container since now top-wrapper will be the size of container only
– Jaromanda X
Mar 23 at 9:19
.container width: 1170px; padding: 0 15px; margin: 0 auto; .top-wrapper position:relative; .top-wrapper video position:absolute; width:100%; height:100%; background:green; z-index:-1;
– Takashi
Mar 23 at 14:31
|
show 1 more comment
use avideotag with appropriate styling to put it in the background
– Jaromanda X
Mar 23 at 8:47
1
additional hint for @JaromandaX comment:<video>&.containershould haveposition absolute;and.top-wrapperposition: relative;
– davbuc
Mar 23 at 8:56
@davbuc - that's what I said ... appropriate styling :D - though the only thing left to consider is getting the video element sizing to follow the container
– Jaromanda X
Mar 23 at 9:13
@davbuc - don't make the container absolute, just the video absolute, and the top-wrapper relative, then make the video 100% width and height and it will take the dimensions of the container since now top-wrapper will be the size of container only
– Jaromanda X
Mar 23 at 9:19
.container width: 1170px; padding: 0 15px; margin: 0 auto; .top-wrapper position:relative; .top-wrapper video position:absolute; width:100%; height:100%; background:green; z-index:-1;
– Takashi
Mar 23 at 14:31
use a
video tag with appropriate styling to put it in the background– Jaromanda X
Mar 23 at 8:47
use a
video tag with appropriate styling to put it in the background– Jaromanda X
Mar 23 at 8:47
1
1
additional hint for @JaromandaX comment:
<video> & .container should have position absolute; and .top-wrapper position: relative;– davbuc
Mar 23 at 8:56
additional hint for @JaromandaX comment:
<video> & .container should have position absolute; and .top-wrapper position: relative;– davbuc
Mar 23 at 8:56
@davbuc - that's what I said ... appropriate styling :D - though the only thing left to consider is getting the video element sizing to follow the container
– Jaromanda X
Mar 23 at 9:13
@davbuc - that's what I said ... appropriate styling :D - though the only thing left to consider is getting the video element sizing to follow the container
– Jaromanda X
Mar 23 at 9:13
@davbuc - don't make the container absolute, just the video absolute, and the top-wrapper relative, then make the video 100% width and height and it will take the dimensions of the container since now top-wrapper will be the size of container only
– Jaromanda X
Mar 23 at 9:19
@davbuc - don't make the container absolute, just the video absolute, and the top-wrapper relative, then make the video 100% width and height and it will take the dimensions of the container since now top-wrapper will be the size of container only
– Jaromanda X
Mar 23 at 9:19
.container width: 1170px; padding: 0 15px; margin: 0 auto; .top-wrapper position:relative; .top-wrapper video position:absolute; width:100%; height:100%; background:green; z-index:-1;
– Takashi
Mar 23 at 14:31
.container width: 1170px; padding: 0 15px; margin: 0 auto; .top-wrapper position:relative; .top-wrapper video position:absolute; width:100%; height:100%; background:green; z-index:-1;
– Takashi
Mar 23 at 14:31
|
show 1 more comment
3 Answers
3
active
oldest
votes
0
It's pretty simple. You can add video from following methods.
<video src="/myvideo.mp4"></video><video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
add a comment |
0
Add a video element inside top-wrapper, see the styling below
.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
add a comment |
0
Here is a thought, you can try that:
- you can use
videotag to import your video file - set style of
video, like:
video
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
answered Mar 23 at 8:57
Rey WangRey Wang
627
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55312069%2fhow-do-i-add-a-video-instead-of-a-photo-on-top-wrapper%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It's pretty simple. You can add video from following methods.
<video src="/myvideo.mp4"></video><video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
add a comment |
0
It's pretty simple. You can add video from following methods.
<video src="/myvideo.mp4"></video><video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
add a comment |
0
0
0
It's pretty simple. You can add video from following methods.
<video src="/myvideo.mp4"></video><video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
It's pretty simple. You can add video from following methods.
<video src="/myvideo.mp4"></video><video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
answered Mar 23 at 9:10
Dhara BabariyaDhara Babariya
524
524
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
add a comment |
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
erm, did you read that they want it as a background
– Jaromanda X
Mar 23 at 9:11
add a comment |
0
Add a video element inside top-wrapper, see the styling below
.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
add a comment |
0
Add a video element inside top-wrapper, see the styling below
.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
add a comment |
0
0
0
Add a video element inside top-wrapper, see the styling below
.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
Add a video element inside top-wrapper, see the styling below
.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>.top-wrapper
position:relative;
background:rgba(255,0,0,0.1);
.top-wrapper .video
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="blog">Blog</a>
<a href="#" class="cv">CV</a>
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a></p>
</div>
</div>
</div>answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
answered Mar 23 at 9:25
Jaromanda XJaromanda X
37.1k43255
37.1k43255
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
add a comment |
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
I just replaced the video url to mine, but video isn't come out...i really don't know why...
– Takashi
Mar 23 at 10:00
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
Well that's a different problem. see how this snippet has a video exactly where you want one
– Jaromanda X
Mar 23 at 10:07
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
hi i am sorry again, could upload the video tho, it doesn't play...like a photo;(
– Takashi
Mar 23 at 11:49
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
Is there a video in the answer? Perhaps your browser ous different to mine. What browser?
– Jaromanda X
Mar 23 at 14:32
add a comment |
0
Here is a thought, you can try that:
- you can use
videotag to import your video file - set style of
video, like:
video
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
answered Mar 23 at 8:57
Rey WangRey Wang
627
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
add a comment |
0
Here is a thought, you can try that:
- you can use
videotag to import your video file - set style of
video, like:
video
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
answered Mar 23 at 8:57
Rey WangRey Wang
627
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
add a comment |
0
0
0
Here is a thought, you can try that:
- you can use
videotag to import your video file - set style of
video, like:
video
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
answered Mar 23 at 8:57
Rey WangRey Wang
627
Here is a thought, you can try that:
- you can use
videotag to import your video file - set style of
video, like:
video
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
answered Mar 23 at 8:57
Rey WangRey Wang
627
edited Mar 23 at 9:54
answered Mar 23 at 8:57
Rey WangRey Wang
627
answered Mar 23 at 8:57
Rey WangRey Wang
627
answered Mar 23 at 8:57
Rey WangRey Wang
627
627
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
add a comment |
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
your style would make it fixed behind the whole page - did you read the question?
– Jaromanda X
Mar 23 at 9:12
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
@JaromandaX Thats not important, if u dont want to be fixed, just change style, float flex its all ok
– Rey Wang
Mar 23 at 9:55
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55312069%2fhow-do-i-add-a-video-instead-of-a-photo-on-top-wrapper%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use a
videotag with appropriate styling to put it in the background– Jaromanda X
Mar 23 at 8:47
1
additional hint for @JaromandaX comment:
<video>&.containershould haveposition absolute;and.top-wrapperposition: relative;– davbuc
Mar 23 at 8:56
@davbuc - that's what I said ... appropriate styling :D - though the only thing left to consider is getting the video element sizing to follow the container
– Jaromanda X
Mar 23 at 9:13
@davbuc - don't make the container absolute, just the video absolute, and the top-wrapper relative, then make the video 100% width and height and it will take the dimensions of the container since now top-wrapper will be the size of container only
– Jaromanda X
Mar 23 at 9:19
.container width: 1170px; padding: 0 15px; margin: 0 auto; .top-wrapper position:relative; .top-wrapper video position:absolute; width:100%; height:100%; background:green; z-index:-1;
– Takashi
Mar 23 at 14:31