Make a React-video Cover the Parent Container? (react-player) - reactjs

I'm trying to get my video to fit/cover the entire screen and respond to resize just like if you use objectFit: cover or backgroundSize: cover. Right now when the video is too large you can see the left and right side of the video, and when the window is too small, you are able to see the top and bottom.
import React from "react";
import ReactPlayer from "react-player/lazy";
const Header = (props) => {
return (
<ReactPlayer
muted={true}
volume={0}
playing={true}
loop={true}
width="100vw"
height="100vh"
style={{
position: "absolute",
objectFit: "cover",
backgroundSize: "cover",
}}
url={props.videos[1]}
/>
);
};
export default Header;
Here you can see the black background:
Too tall:
Too wide:
The container's size is 100vw, 100vh, and the ratio of the video is 4096x2160.
Here an example that I'm trying to not do since the video shrinks with the page:
https://jsfiddle.net/e6w3rtj1/131/

I found my solution, for some reason the react-video package doesn't work with object-fit or background-size, so I had to try something else.
I found that you can just use the html5 video and source tags for the video.
Here the code:
<video
autoPlay
muted
loop
style={{ height: "100%", width: "100%", objectFit: "cover" }} //object-fit:cover
>
<source src={props.videos[1]} type="video/mp4" />
</video>

Related

How to make the Swiper.js and React Player carousel responsive

I have been looking for a way to make my Swiper.js carousel responsive when it's nesting the Youtube React Player. I finally found a workaround and hope this helps somebody. This also works if the slidesPerView is more than 2 or even float number like slidesPerView={1.3}.
Remove the default css mySwiper class, and apply player-wrapper and react-player css as below.
The point is that the player-wrapper div is self close and does not wrap the <ReactPlayer> component. Also have the width and height props to be 100% in the <ReactPlayer> component.
<Swiper
slidesPerView={1.3}
grabCursor={false}
loop={false}
watchSlidesProgress={true}
centeredSlides={true}
modules={[Pagination, Navigation]}
// className='mySwiper' <=remove
>
<SwiperSlide>
<div className='player-wrapper' /> //<= self close div
<ReactPlayer
url='youtube.com/1234'
controls={true}
width='100%'
height='100%'
playing={isPlaying === data.id}
config={{
youtube: {
playerVars: { showinfo: 1 },
},
}}
className='react-player'
/>
</SwiperSlide>
CSS
.player-wrapper {
position: relative;
padding-top: 56.25%
}
.react-player {
position: absolute;
top: 0;
left: 0;
}

Gatsby image fluid set to max-height

How can I set the height of an image in gatsby? My approach was this:
My query:
image {
fluid {
...GatsbyContentfulFluid_withWebp
}
}
My return:
<Img fluid={image.fluid} style={{ maxHeight: '200px' }} alt={title}></Img>
The image is displaying fine but I query more than one image and using style={{ maxHeight: '200px' }} is not working for all images. Some images having different heights, I would like to display all images with the same height.
What's the proper way of doing this?
I think you are looking for a fixed image, not fluid:
My query:
image {
fixed {
...GatsbyContentfulFixed_withWebp
}
}
My return:
<Img fixed={image.fixed} style={{ height: '200px', width: 'auto' }} alt={title}></Img>
In addition, use the height, not the maxHeight property to force all image's height to 200px.
According to the docs you should use imgStyle property for directly applying styles to underlying <img>
Try something like
<Img
fluid={image.fluid}
imgStyle={{ height: '200px', width: 'auto' }}
alt={title}>
</Img>
style is applied to wrapper of <img> and your images might be overflowing it.

Unable to set Nuka Carousel slide content height

I can't get the content of my nuka-carousel slides to be the same height. Setting heightMode="max" on the carousel sets the slide heights equal, but trying to expand the slide content isn't working right.
I've tried setting height on the slides to 100%, inherit, 100vh but no matter what, the slides expand to maybe 2-20x what they should be (depending on the div with the most content).
I've also tried using flexbox with flex:1 and I've tried with css-grid. Nothing seems to help
const Item = ({ children }) => (
<div
style={{
boxShadow: "rgb(153, 153, 153) 2px 2px 4px 2px"
// height: "100%"
// height: "100vh"
/// height: 'inherit'
}}
>
{children}
</div>
);
<Carousel
wrapAround
heightMode="max"
slidesToShow={1.25}
cellAlign="center">
{/* Item components with varying content */}
</Carousel>
Here's a codesandbox, If anyone has any suggestions I'd appreciate it.
https://codesandbox.io/s/brave-khorana-bowrz?file=/src/index.js

React Native: Why is image stretching vertically to fill container and how to prevent it?

In my React Native app, I have a red box of height 300 that I want to center vertically, and an image that I want to sit inside and at the top of this red box. Here is my code so far:
import React, { Component } from 'react';
import { View, Image} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<View
style={{
borderWidth: 3,
borderColor: 'red',
width: "100%",
height: 300
}}
>
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
height: "100%",
resizeMode: "contain",
borderWidth: 3
}}
>
</Image>
</View>
</View>
);
}
}
Here's what this looks like:
The red box is the outer box I mentioned, and the black box is just the border of the Image. The problem is that this black box (ie the Image) expands to fill the red box vertically, and the image is vertically centered inside this black box, so it's vertically centered inside the red box, as opposed to at the flex-start position that I want it at. I've tried adding justifyContent: flex-start and flexShrink: 1 to the Image and neither has made a difference.
Does anyone know how I can approach this?
NOTE:
If I remove the height: 100% on the Image, I get this:
UPDATE:
To clarify, this is what I'd like it to look like. I've removed the black border here. I moved it up to where I want it by adding top: -95, but this won't work in general because the value would be different for different devices:
try doing like this
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
borderWidth: 3
}}
resizeMode={"contain"}
/>
There is a difference between Image (the view) and the content of that image. On your screenshot, the image view has the black border and its content is sitting inside of it. Because they have different aspect ratios, there is going to be either a blank space or cut-off on the content. You can't adjust position of the content as it's not laid out on flex basis. Image view is just a window that then renders image content. There is no property to tell Image where to align that content
Your problem comes from the fact that screen width differs, and aspect ratio of your container also differs (variable width but constant 300 height). What you need to do is
measure container width
determine proper aspect ratio for the image based on image resource width and height
set your image width to 100% and its height according to received aspect ratio
here, my image dimensions are 1005 * 219:
const Test = () => {
const [width, setWidth] = useState(0);
return (
<View>
<View
onLayout={e => setWidth(e.nativeEvent.layout.width)}
style={{ width: '100%', height: 300, borderWidth: 1 }}>
<Image
style={{
width: '100%',
height: (width / 1005) * 219,
borderWidth: 1,
borderColor: 'red',
}}
source={require('...')}
/>
</View>
</View>
);
};

How make full screen image landscape orientation in react native?

I am interesting in how to make full screen image landscape orientation, but without height: 100%, so width will be 100% but what is with height, because in react native height: not work=
try like this
<View style={{ flexDirection: 'row',}}>
<Image
style={{
flex: 1,
width: null,
height: '100%',
overflow: 'hidden',
}}
resizeMode='contain'
source={{ uri: 'image path' }}
/>
First of all, install the package named #react-native-community/hooks ( npm i #react-native-community/hooks )
then import useDimentions and useDeviceOrientation from the package above.
Example: import {useDimentions,useDeviceOrientation } from "#react-native-community/hooks"
Destructure them like:
const { landscape, portrait } = useDeviceOrientation();
const { screen, window } = useDimensions();
landscape, portrait are booleans
screen, window are the objects with height, width and etc. ( just check it by console.log)
Then use screen.height or window.height to get the device's height

Resources