I have applied the css to the video but the video won't appear. Any help? I have received a cSpell error, I'm not sure if this affects the video showing up?
import React from 'react'
import './HeroStyles.css'
import Video from '../../../assets/rnbbackground.mp4'
function Hero() {
return (
<div className='hero'>
<video autoPlay loop muted id='video'>
<source src={Video} type='video/mp4' />
</video>
</div>
)
}
export default Hero
css:
.hero{
width: 100%;
height: 100vh;
color: #fff;
position: relative;
}
Related
I would like to modify only the content of reactplayer. That is, the play button, the music track or the background color. I use for that the react-player module. Thanks and have a nice day.
// My app
<div className="player-wrapper" >
<ReactPlayer url="https://soundcloud.com/supperclubmix/black-eye-peas-dirty-bit-remix?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing"
className="react-player"
id="music"
height="auto"
width="90%"
controls={true}
loop={true}
/>
</div>
</div>
//CSS
.player-wrapper {
}
.react-player {
margin-top: 115%;
margin-left: auto;
margin-right: auto;
}
My video is not appearing in each Video element, is there anything wrong with my codes? can anyone help me? Thank you so much!
This is my Video.js:
import React from "react";
import "./Video.css";
function Video() {
return (
<div className="video">
<video src="./video.mp4"> </video>{" "}
</div>
);
}
export default Video;
This is my App.js:
import React from "react";
import Video from "./Video";
import "./App.css";
function App() {
return (
<>
hello code{" "}
<div className="app">
<div className="app-videos">
<Video />
<Video />
<Video />
<Video />
</div>{" "}
</div>{" "}
</>
);
}
export default App;
This is my App.css:
html {
scroll-snap-type: y mandatory;
}
.app {
height: 100vh;
background-color: black;
display: grid;
place-items: center;
}
.app-videos {
position: relative;
height: 800px;
overflow: scroll;
width: 80%;
max-width: 500px;
scroll-snap-type: y mandatory;
}
This is my Video.css:
.video {
position: relative;
border: 5px solid red;
background-color: white;
height: 500px;
width: 100%;
height: 100%;
scroll-snap-align: start;
}
This is my directory:
enter image description here
The video HTML tag has a children <source/>. That accepts the video URL in the src prop.
<video width="320" height="240" controls>
<source src="./video.mp4" type="video/mp4" />
</video>
Refer this link
I am trying to make sure that any CSS I put within my Footer is not affected by adding my Google Maps API. You can see from the example that I am not able to keep the back ground black.
Footer
import React, {Component} from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
import './App.css';
class Footer extends Component {
render(){
const style = {
width: '300px',
height: '300px',
backgroundColor: 'black'
}
return (
<div className="site-footer">
<footer>
<p>My Footer</p>
<Map
google={this.props.google}
zoom={10}
initialCenter={{
lat: 35.5496939,
lng: -120.7060049
}}
style={style}
/>
</footer>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: ('YOUR_API_KEY')
})(Footer);
Footer CSS
.site-footer {
left: 0;
bottom: 0;
width: 100%;
margin-top: 20px;
color: white;
text-align: center;
flex-shrink: 0;
background: black;
}
Footer Example
It seems that there are different divs that contains the map when using the google-maps-react library. Per the package's documentation there's a style - which you configure to set the map dimension and there's a containerStyle - which is a div that contains the map.
So to set the map background to black, you need to use the containerStyle.
class Footer extends Component {
render(){
const style = {
width: '300px',
height: '300px'
}
const containerStyle = {
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: 'black'
}
return (
<div className="site-footer">
<footer>
<p>My Footer</p>
<Map
google={this.props.google}
zoom={10}
initialCenter={{
lat: 35.5496939,
lng: -120.7060049
}}
style={style}
containerStyle={containerStyle}
/>
</footer>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY"
})(Footer);
You would also need to define the width and height of your site-footer class to fill in the white spaces. I used 800px here so that it will really fully contain my map and its container.
.site-footer {
left: 0;
bottom: 0;
width: 800px;
height: 800px;
margin-top: 20px;
color: white;
text-align: center;
flex-shrink: 0;
background-color: black;
}
Please see sample code.
Please use your API key in the sample code for it to work.
I'm doing SPA wherein I've sticky header and a half background image with 3 cards (having a title and image) on, the only thing I'm being stuck is when, I scroll down the top image must have transitioned. when the page is getting scrolled the background image should appear in that much of image transition. when I scroll back up the image must do transition expanding itself and hiding the background image.
post.scss:
#import '../scss/common.scss';
.container{
background-image: url("../images/bg2.jpg") ;
height:80%;
//background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.header{
// background-color: $primary-background;
padding: 10px 16px;
// color: #f1f1f1;
height: 50px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 100px;
}
.blank{
height: 800px;
}
post.js:
import React from 'react';
import TitleContainer from '../container/titleContainer';
import './post.scss';
import Cards from '../container/cards';
import imgT from '../images/city1.jpg';
class Post extends React.Component{
constructor(props) {
super(props);
this.state={
}
this.header = React.createRef();
}
handscroll=(e)=>{
const node = this.header.current;
let sticky=node.offsetTop
//console.log(node)
// console.log(sticky)
if (window.pageYOffset > sticky) {
node.classList.add("sticky");
} else {
node.classList.remove("sticky");
}
// console.log(e)
}
componentDidMount(){
window.addEventListener('scroll',this.handscroll)
}
render(){
return(
<div className="container" >
<div className="header" ref={this.header}>
<TitleContainer title="World Top Cities"/>
</div>
<div className="content">
<Cards title="t1" cntryImg={imgT} />
<Cards title="t2" cntryImg={imgT} />
<Cards title="t3" cntryImg={imgT} />
<div className="blank"></div>
</div>
</div>
)
}
}
export default Post;
card.scss:
%common-all{
width: 100%;
}
//border:1px solid #80808040;
//height:250px;
// border-radius: 0 0 15px 15px ;
#mixin commonFn($border,$height,$borderRadius){
border:$border;
height:$height;
border-radius: $borderRadius ;
}
.container3{
#extend %common-all;
// border-radius: 40px;
margin-top:3%;
.title{
#extend %common-all;
#include commonFn(1px solid #80808040,50px,15px 15px 0 0);
background-color: white;
}
.cntryImg{
#extend %common-all;
#include commonFn(0,250px,0 0 15px 15px)
}
}
cards.js:
import React from 'react';
import '../scss/cards.scss'
class Cards extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div className="container3">
<div className="title">
{this.props.title}
</div>
< div className="cntryImg1">
<img src={this.props.cntryImg} alt="noImg" className="cntryImg"/>
</div>
</div>
)
}
}
export default Cards;
I don't know where I'm going wrong, I do have any much no idea how do I approach it. when the page is getting scrolled down the background image should appear in that much of image transition (here image transists). When I scroll back up the image must do transition expanding itself and hiding the background image.
Please help I'm stuck past two days. Let me know if I'm not clear. Please help me on how doing it.
Updated
No, not height theirs half background image, out of 3 "containers3"(cards) 2 "containers3"(cards) covering the background image one is white background when I scroll down there should be transition effect the suppose 10px (just for ex) I scroll only that many pixels transition must happen for that particular card (not hidden at once transition effect way of hiding and showing background image when scroll up or down respectively) and background image for that particular 10px must be shown, position must not change. (here theirs transition way of hiding and showing background image)
Goal:
I'm trying to loop a video infinitely on a React gatsby site. I have a mp4 file locally under assets, but it doesn't show up on my screen.
What I've tried:
I thought it might be a CSS issue so I set it and it's clearly width and height 100% of the window but video is still not showing up.
JS:
import React from "react"
import "./index.css"
export default () => (
<div>
<video id="background-video" loop autoPlay>
<source src="..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
</div>
)
CSS:
#background-video {
height: 100%;
width: 100%;
float: left;
top: 0;
padding: none;
position: fixed;
/* optional depending on what you want to do in your app */
}
I'm using this configuration:
import forest from "../../images/forest.mp4"
//import the video file and then
<video width="100%" height="100vh" preload='auto' poster={poster} loop autoPlay muted>
<source src={video} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
turned out you need to use
require("..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4")
as src