Need to add a video on my top-wrapper, please teach me how to style cssCSS Layout with Pixel And PercentsHow to style a <select> dropdown with only CSS?How can I remove a style added with .css() function?How to style a checkbox using CSS?Vertical alignment of elements overlapping in IESet a div width, align div center and text align leftSet div to remaining height using CSS with unknown height divs above and belowWhy does this CSS margin-top style not work?Cannot display HTML stringTextarea too large for page?
Any gotchas in buying second-hand sanitary ware?
Parsing text written the millitext font
Is fission/fusion to iron the most efficient way to convert mass to energy?
Can I get a photo of an Ancient Arrow?
Why is C++ template use not recommended in space/radiated environment?
Why did Robert pick unworthy men for the White Cloaks?
Background for black and white chart
Is it a good security practice to force employees hide their employer to avoid being targeted?
Why is gun control associated with the socially liberal Democratic party?
How can religions without a hell discourage evil-doing?
What did the 8086 (and 8088) do upon encountering an illegal instruction?
What does this circuit symbol mean?
DBCC SHRINKFILE on the distribution database
Is it possible to install Firefox on Ubuntu with no desktop enviroment?
Approach sick days in feedback meeting
Can Mage Hand be used to indirectly trigger an attack?
Shouldn't it take more energy to break CO2 compared to CO?
Can artificial satellite positions affect tides?
Realistic, logical way for men with medieval-era weaponry to compete with much larger and physically stronger foes
Is it true that "only photographers care about noise"?
Do Veracrypt encrypted volumes have any kind of brute force protection?
Is all-caps blackletter no longer taboo?
Is it possible to have battery technology that can't be duplicated?
Am I allowed to determine tenets of my contract as a warlock?
Need to add a video on my top-wrapper, please teach me how to style css
CSS Layout with Pixel And PercentsHow to style a <select> dropdown with only CSS?How can I remove a style added with .css() function?How to style a checkbox using CSS?Vertical alignment of elements overlapping in IESet a div width, align div center and text align leftSet div to remaining height using CSS with unknown height divs above and belowWhy does this CSS margin-top style not work?Cannot display HTML stringTextarea too large for page?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<!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="responsive.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="video" src="video3344.mov" autoplay loop muted type="video/mp4"></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>html css
asked Mar 25 at 1:22
Takashi Takashi
31
add a comment |
0
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<!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="responsive.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="video" src="video3344.mov" autoplay loop muted type="video/mp4"></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>html css
asked Mar 25 at 1:22
Takashi Takashi
31
add a comment |
0
0
0
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<!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="responsive.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="video" src="video3344.mov" autoplay loop muted type="video/mp4"></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>html css
asked Mar 25 at 1:22
Takashi Takashi
31
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<!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="responsive.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="video" src="video3344.mov" autoplay loop muted type="video/mp4"></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>body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<!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="responsive.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="video" src="video3344.mov" autoplay loop muted type="video/mp4"></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>body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
a
text-decoration: none;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
.top-wrapper
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<!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="responsive.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="video" src="video3344.mov" autoplay loop muted type="video/mp4"></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>html css
html css
asked Mar 25 at 1:22
Takashi Takashi
31
asked Mar 25 at 1:22
Takashi Takashi
31
asked Mar 25 at 1:22
Takashi Takashi
31
asked Mar 25 at 1:22
Takashi Takashi
31
asked Mar 25 at 1:22
Takashi Takashi
31
31
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
answered Mar 25 at 1:36
AnnoAnno
63
add a comment |
0
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
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%2f55330213%2fneed-to-add-a-video-on-my-top-wrapper-please-teach-me-how-to-style-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
answered Mar 25 at 1:36
AnnoAnno
63
add a comment |
0
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
answered Mar 25 at 1:36
AnnoAnno
63
add a comment |
0
0
0
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
answered Mar 25 at 1:36
AnnoAnno
63
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
answered Mar 25 at 1:36
AnnoAnno
63
answered Mar 25 at 1:36
AnnoAnno
63
answered Mar 25 at 1:36
AnnoAnno
63
answered Mar 25 at 1:36
AnnoAnno
63
63
add a comment |
add a comment |
0
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
add a comment |
0
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
add a comment |
0
0
0
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>body
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
*
box-sizing: border-box;
a
text-decoration: none;
.mt-50
margin-top: 50px;
.container
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
.top-wrapper:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
.top-wrapper
padding: 65px 0 0px 0;
text-align: center;
position: relative;
.top-wrapper h1
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
.top-wrapper p
font-size: 25px;
color: white;
text-align: center;
header
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
<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 autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">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>answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
edited Mar 25 at 2:08
answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
answered Mar 25 at 1:56
SaravanaSaravana
1,9102622
1,9102622
add a comment |
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%2f55330213%2fneed-to-add-a-video-on-my-top-wrapper-please-teach-me-how-to-style-css%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
