Issues with displaying video content and controlling the Bootstrap 5 video carousel

I have encountered an issue while coding a website for a friend's company. He requested a video carousel to be added to his existing site, so I incorporated links and scripts for Bootstrap in order to create a gallery for his products and a carousel to feature videos from events.

The problem arises as the carousel is not displaying as intended and seems to be malfunctioning. Despite my efforts in troubleshooting and researching online for solutions, I have been unable to rectify the issue. Hence, I am reaching out here for any advice or insights.

Below is a snippet of the code for the carousel:

<!-- Start of Video Section -->
    <section id="videos">
        <div class="container-fluid col-8 offset-2">
            <div id="carousel_nuevo" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators" style="margin-bottom: 50px;">
                    <li data-target="#carousel_nuevo" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel_nuevo" data-slide-to="1"></li>
                    <li data-target="#carousel_nuevo" data-slide-to="2"></li>
                    <li data-target="#carousel_nuevo" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <video width="900" height="600" border="5" controls="controls">
                            <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4">
                        </video>
                        <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                            <h3 class="h3-responsive">Video 1</h3>
                        </div>
                    </div>
                    <!-- Other Carousel Items -->                    
                    <a class="carousel-control-prev" href="#carousel_nuevo" role="button" data-slide="prev" style="margin-bottom: 60px;">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel_nuevo" role="button" data-slide="next" style="margin-bottom: 60px;">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

    </section>
    <!-- End of Video Section -->

I am utilizing a default carousel similar to what can be found on W3Schools and other platforms.

https://i.sstatic.net/N3ejp.jpg

Currently, the carousel does not seem to be loading correctly and the additional videos are not being displayed. Any assistance would be greatly appreciated. Thank you.

htmlcssbootstrap-4bootstrap-5

Answer №1

<video style={{ width: "100%", height: "100%" }} controls autoPlay loop> 
<source src="movie.mp4" type="video/mp4">
</source>
 </video>

or if you prefer using an npm package, you can install 

npm i react-player npmjs.com/package/react-player

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Can anyone help me with an issue I am facing with a Bootstrap button? Despite using only the btn btn-default classes, when inspecting it in Chrome, multiple classes are being displayed on the button. I'm unable to figure out why this is happening and ...

javascripthtmlangularjstwitter-bootstrap

Creating a circular shape that adjusts to different screen sizes using only CSS

Is there a way to create perfect circles using only CSS without them turning into ovals when using percentage values for height? ...

htmlcss

Trouble aligning Material UI data-table columns (table head) to center in React

I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...

cssreactjsmaterial-ui

Trouble with CSS full height implementation within a scrolling container

I have been grappling with this straightforward issue for quite some time now. It seems to be a unique problem as I couldn't uncover a similar one online. My goal is to set the height of the green bar to 100% (to match the height of the red parent el ...

javascripthtmlcss

Utilizing JQuery to create a dynamic background image slider that cycles through images extracted from a selection of

Case Study: Implementing a background-image slider with JQuery listening for window resizing. Depending on the screen size, a specific array is set as the image file paths source. Encountering a 6-second delay issue where the initial image does not displ ...

jquerycssslideshow

How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below: <div class="row mx-5 my-5 h-75 w-80"> <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advanc ...

cssangulartwitter-bootstrap-3responsive-designbootstrap-4

Modifying the position of an image in Flask

I am trying to center an image on my webpage and have attempted the following code: <image height="300px" width="300px" src="{{url_for('static',filename = 'img/Rasd.jpeg')}}" > Visit this webpage fo ...

pythonhtmlflask

Execute a controller's method by clicking a form button in PHP/CodeIgniter

Currently, I am working on a small PHP project using CodeIgniter and NetBeans. Here is the HTML view I have created: <div class="section section_with_padding" id="users"> <h1>Users Access</h1> <div class="half left"& ...

phphtmlcodeigniter

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

htmlcssoverlay

Navigating intricate JSON information using AngularJS

I am working on displaying JSON data in an HTML form using ng-repeat. I have managed to retrieve data from some objects, but I am facing challenges due to the nested structure of objects like "Obj => Obj => Obj". In the JSON object provided below, I ...

htmljsonangularjs

Having trouble setting the image source in HTML with Node.js

I am a beginner with nodeJS and I am having trouble setting the src attribute of an img tag in my client side html. My node server is running on port 3000 and everything works fine when I visit http://localhost:3000. Here is the code from my server.js fil ...

javascripthtmlnode.jssocket.io

Leveraging src css within the React public directory

I have set up my React application to import a stylesheet from the src folder using import './css/styles.css' at the top of App.js. In the public folder, I have created a basic /docs/index.html file that is linked to from the React app but opera ...

htmlcssreactjs

A compilation of audio files compatible with all web browsers, no flash required

Currently in the process of developing a website dedicated to Songs, featuring playlists and mp3 files. I have come across various flash mp3 playlist players, however I am looking to avoid using flash and ensure compatibility with all browsers and smartp ...

jqueryhtmlmp3playlist

The height of the first item in the navigation menu seems oddly disproportionate

I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...

htmlcsstwitter-bootstrap

Reposition picture "overlays" additional HTML components

I am struggling with rotating an image by clicking on a button as the image overlaps the buttons. Can anyone provide guidance on how to achieve this without overlapping? For reference, here is my code and an example: here (http://jsfiddle.net/jj03b17n/5/) ...

javascriptjqueryhtmlcssrotatetransform

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...

javascriptjqueryhtmlcssevents

Form on the internet with a following button

Currently working on a basic form: <tr> <td> <label for="FirstName">First Name <span class="req">*</span> </label> <br /> <input type="text" name="FirstName" id="FirstName" class="cat_textbox" ...

phphtmlcssajax

Tips on showing a specific div when a button is clicked using jQuery and Bootstrap

In my button group, I have four buttons and I need one specific button to display certain div content when clicked. The displayed content should be based on which button is clicked. Is there a way to achieve this using Twitter Bootstrap jQuery in ASP.NET ...

javascriptjqueryhtmltwitter-bootstrap

Utilize Node.js and Cheerio to extract data from an HTML table

Having trouble converting an HTML table to JSON. HTML table structure: <div id="content"> <h1>content-information</h1> <table class="testinformation"> <thead> <tr> ...

javascripthtmlnode.jsparsingcheerio