I am using React player version 1.15.3 to play videos in an React web app. I am having an issue with displaying videos from Vimeo, react player seems to shrink them to mini size. I have tried the few things I can think of as well as the responsive player recommendation here https://github.com/CookPete/react-player#responsive-player but still no luck. I need to make it fill its parent container and be responsive as well.
Screenshot of issue
Code for react player
<div className='player-wrapper'>
<ReactPlayer
url={props.video.url}
muted
controls
width='100%'
height='100%'
className='react-player'
/>
</div>
CSS Code for react player
.player-wrapper {
position: relative;
padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}
.react-player {
position: absolute;
top: 0;
left: 0;
}
Thank you for your help
Related
Im creating a drag test for a marker into google maps on react, like the follows
cy.get('[style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > img')
.move({ deltaX:20, deltaY: 20}).wait(600)
in Linux works fine but in macos, isn't work maybe im choosing bad the selector ? Please help me
Greetings
Is it possible to create a loading splash screen that is animating while the rest of the react project is getting rendered?
I'm guessing this would be done through server-side rendering but I am clueless as to how.
It is possible
Add like this.
Edit these index.html in your public folder
Add this in head. This css will make the loader center align
<style>
.img-loader-init img { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
</style>
and in the body
<div id="root">
<div class="img-loader-init">
<img src="loader.gif" alt="loader">
</div>
</div>
loader.gif should be under public folder.
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
How Can I set an animated launch screen like the one below, into my Progressive Web App? Is it possible?
Animated Launch Screen
Currently PWA splash screen can only consist of a color, a logo, and an title. There are some standards discussions happening around providing a more powerful API but nothing has been solidified as of this answer.
An option is to use the standard static splash screen and then animate into the content of your app. Here is a little sample code that creates an overlay matching your PWA's background_color, and then animates the background up into the toolbar. Obviously you'll want to tweak the coloring. You could even switch to a fade-in instead of a slide-up animation.
<style>
#splash {
background-color: #2196F3;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
z-index: 10;
transition-property: top;
transition-duration: 300ms;
transition-delay: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
#splash.animate {
top: -100vh;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#splash').addEventListener('transitionend', (event) => {
event.target.remove();
});
requestAnimationFrame(() => {
document.querySelector('#splash').classList.add('animate');
});
});
</script>
<div id="splash"></div>
Sample - Demo - Source
I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height.
What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so?
You can use
height:100vh
for your App component, but it can looks not perfect on iOS Safari. Also you can set
html, body, #reactapp, .App {
height: 100%;
}
.App {
display: flex;
}
patelarpan's answer here seems to be the most concise solution:
You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.
.columnContainer {
display: flex;
height: calc(100vh - 60px);
}
Here is an example of the 60px app bar height being excluded from the viewport height.
I replaced the height line in patelarpan's example with this, since I don't have an app bar:
height: 100vh;
root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }