Looking for assistance with a Next.js and tailwind site I am building.
Having trouble getting the video component to display properly on mobile screens.
Tried various fixes but the video still gets cut off on smaller screen sizes.
If anyone has a solution, it would be greatly appreciated!
To view the deployed site, visit: www.catrinmentzoni.com
You can also find the Github repo at: https://github.com/Babyoilrig/Catrin--Mentzoni-Portfolio
Thank you in advance
Great job with the responsive youtube embed hack, here is the updated solution on codesandbox - https://codesandbox.io/s/admiring-parm-mmj5xw?file=/components/VideoSection/index.js:1114-1251
You can view the final result here -
<div
class="grid gap-0 grid-cols-1
grid-rows-1 place-items-center
content-center pl-5 pr-5" // <<< This part is unnecessary.
className={css.videoResponsive}
The issue where className={css.videoResponsive} wasn't being applied has been resolved by removing the unnecessary tailwind classes like class=grid gap-0, as the YouTube video responsiveness code now handles page alignment.
In React 16, using class is functional but triggers a warning that can be viewed in your console. It's recommended to stick to consistently using className when writing JSX.
I have also eliminated the width/height specifications from the iframe element.
A new requirement has come up for Desktop to be centered and 50%, while mobile remains full width.
The following serves as guidance rather than a permanent fix:
@media screen and (min-width: 769px) {
.videoResponsive {
overflow: hidden;
position: relative;
width: 100%;
}
.videoResponsive::after {
padding-top: 56.25%;
display: block;
content: "";
border: 1px solid red;
}
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
border: 0;
position: absolute;
width: 50%;
height: 915px;
left: 0;
right: 0;
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
.videoResponsive {
overflow: hidden;
position: relative;
width: 100%;
}
.videoResponsive::after {
padding-top: 56.25%;
display: block;
content: "";
}
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
You can utilize media queries to adjust behavior, but be aware that the padding-top adds extra space which may require tweaking.
The codesandbox link above showcases the updated outcome https://codesandbox.io/s/admiring-parm-mmj5xw?file=/components/VideoSection/VideoSection.module.css:680-1556
Seeking help to hide the password object from being displayed. Below is my code snippet where I am using bcrypt to hash the password. Even though I am trying to hide the return object, I am not seeing the desired outcome. Can someone please point out wha ...
While achieving this in vanilla Javascript is relatively simple (check out this for an example), I'm encountering difficulties implementing it in React, especially with a library like Framer Motion for animations. Framer Motion's useViewPortScro ...
In my food truck app, I have stored customer orders in the redux state as an array of objects. Each order includes a list of items selected by the customer, along with the count, name, and total price for each item. For example: state.order = [ {item: " ...
Currently, my NextJS application is being hosted on Vercel, and I am looking to integrate a blog using Netlify CMS. Most resources online suggest that Netlify is the way to go for this integration. Is there any specific advantage to using Netlify over Ve ...
Good evening, A while back, I implemented a JavaScript code snippet to create equal height columns on my website. The initial script looked like this: <script type="text/javascript"> var maxHeight = 0; $(".level").each(function(){ maxHe ...
I have a scenario where there are multiple <p> elements with the same class names, but only one of them has a child element. My objective is to highlight only the <p> that contains a child, however, my current code ends up highlighting all of t ...
As I work on a simple login form component, I encountered an issue where clicking on the form should make it disappear and only display my JSON data. However, due to my limited experience with React state management, I seem to be achieving the opposite eff ...
The goal is to activate a button when a row is selected. However, the button remains disabled even after selecting a row. Below is a snippet of the code as well as a screenshot showing the issue [error_1]: onInit: function () { var oViewMode ...
Currently, I am tackling some bug fixes on an older Zend Framework 1.10 project and encountering difficulties with redirection and page refresh. The issue: The task at hand is to make an AJAX call, verify if a person has insurance assigned, and prevent de ...
Check out this plunkr where I'm utilizing angularjs and d3.js. In the plunkr, I've created several donut charts. I'm interested in learning how to display the average data in the center of the arc instead of the percentage. Additionally, I& ...
Can you suggest a more efficient way to write this in JavaScript? let foo; if(bar) { foo = bar.value; } I am attempting to prevent a react error from occurring when `bar` is null if I were to use const foo = bar.value. ...
form <form action="assign_web_menu_action.php" method="post" name="form1" id="form1" > <table id='menuAssign'> <tbody> <tr class="clone_row"> <td> <input type="text" name="menuname[]" id="menuname1" ...
I am in the process of creating a user-friendly "My Account" page using react, where users can easily update their account information. I have divided my components into two sections: the navbar and the form itself. However, I am facing an issue with the s ...
Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...
I am currently working on a confidential project that I prefer not to make public. Despite using node v17.3.0 and npm 8.3.0, I am facing difficulties in displaying the outdated dependencies: $ npm show --outdated npm ERR! code E404 npm ERR! 404 Not Found - ...
I've been working on implementing user authentication using next-auth.js with firebase. I followed the documentation to set up a sign-in system using Google as the provider. However, despite entering the correct credentials, Google keeps indicating th ...
Currently, I am working on an HTML form that includes selectable values. My goal is to have the page load a specific URL when a value is selected while also resetting the form back to its default state (highlighting the "selected" code). Individually, I c ...
I am facing a challenge where I have an array of objects that need to be sorted based on two rules, following a specific order: Firstly, objects with the "departeYet" property set to true should come first. Secondly, the objects must then be sorted numeri ...
Attempting to create my debut app using ReactNative with Expo, I've hit a snag with FlatList. The components are making infinite calls even when I'm not at the end of the view. Another issue might be related; across multiple screens, the infinite ...
In the process of developing a basic chat application, I encountered an issue with passing the username via the Link component. Below is the relevant code snippet: <Link to={{ pathname: `/${room}`, state: { the: user } }}> Enter room </Link> ...