The video fails to appear on the webpage when trying to incorporate a video in a React application

I am facing an issue where the video is not visible on the page when trying to import a video in React.

Upon checking the network section, I can see that the video status code is 200.

import React from "react";

function Video() {
  return (
    <div className="video">
      <video width="320" height="240" autoplay>
        <source src="https://www.youtube.com/watch?v=Nfs1vsDlrxI"></source>
        Your browser does not support the video tag
      </video>
    </div>
  );
}

export default Video;

enter image description here

(I have already imported my Video.js file in App.js)

htmlcssreactjsreact-dom

Answer №1

https://www.youtube.com/watch?v=Nfs1vsDlrxI
is an invalid video URL! Unfortunately, direct links to videos on YouTube cannot be accessed.

In order to use a YouTube video, you need to obtain the embedded code from YouTube and then add it to your webpage:

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

Take a look at this link for reference.

function Video() {
  return (
    <div className="video">
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/Nfs1vsDlrxI"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      ></iframe>
    </div>
  );
}

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

Tips for remaining on the same page after submitting a form?

Just had a quick question about PHP. So, I've got this textbox where users can enter their email and sign up for our mailing list. The problem is that every time they submit the form, it redirects them to marketing-email.php. What I really want is fo ...

phphtml

When I click the button, the loading.gif fails to appear

I'm having trouble getting my loading screen to display when my button is clicked. The Ajax function works fine, but the loading screen is not showing up. CSS <style> #display_loading{ position: absolute; top: 50%; left: 50%; transform ...

javascriptjqueryhtmlcssajax

Automatically capitalize editable input fields

I am currently implementing Jeditable in my datatable and I would like to automatically capitalize text input entries on the form. Is there a way to convert each character to uppercase if it is lowercase? I have some code that I've been working with, ...

jqueryhtmldatatablesjeditable

Is it possible to incorporate a portal in Next.js?

I'm currently facing an issue while working on my React app with Next.js. I am trying to create a modal within a portal, but an error is being thrown stating 'Target container is not a DOM element.' Below is the code snippet causing this pro ...

reactjsnext.jsportalreact-portal

Tips for attaching functions to a fresh SVG element with jQuery?

My jQuery code creates an <svg> element and appends it to a <div>. When I try to access the appended <svg> using each() after the append() function, the event handler doesn't work. However, if I create the <svg> element before ...

javascriptjqueryhtmlsvg

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

javascriptcssreactjsmaterial-ui

Is there a way to utilize the map function to conditionally render elements in React and Firebase simultaneously?

My primary goal is to dynamically display a "Create profile" button if the user does not have a profile in Firebase, or an "Edit profile" button if the user already has a profile. I am able to successfully render the edit profile button by comparing the a ...

reactjsfirebaseconditional-rendering

Submitting search parameters with an HTML button

Is there a way to replace the lower input text field with a button, like this: <input type="button" class="button" name="search" value="Urban" onclick="">. HTML CODE: <form method="post" action="search.php" id="search_form"> <input typ ...

phphtml

Find the target element containing a child element with specific CSS attribute using JQuery

I am attempting to select the element with the class "keyimage" that contains an a tag with a specific background image. This is the code I have written: $( ".keyimage" ).has( "a[style^='background-image: url('https://example.com/wp-content/upl ...

javascriptjquerycss

Problem with Bootstrap Dropdown positioning on mobile devices

I have encountered a puzzling issue with our web application. To demonstrate the problem, I have simplified the page to its bare minimum. You can access it here: Everything seems to be working fine on desktop browsers. However, when I test the page on a m ...

htmltwitter-bootstrapbootstrap-4

The page fails to adjust to changes in the size of the page

I have the following code snippet embedded in my webpage: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta name="viewport" content="width=device-width, ...

htmlcssbootstrap-4flexbox

Coloring the Text on Buttons

After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same? //NAVIGATION //======================== .nav ul display: ...

htmlcss

Don't give up on the entire task just because one promise was rejected

To handle multiple promises in redux saga, you can use the all function (equivalent to Promise.all): yield all( users.map((user) => call(signUser, user)), ); function* signUser() { yield call(someApi); yield put(someSuccessAction); } An issue ...

javascriptreactjspromisereact-reduxredux-saga

Is it secure to allow a specified group of harmless HTML tags from a request?

From my experience as a web developer, I've learned to be cautious when accepting HTML from clients. In my work, I rely on a WYSIWYG editor like TinyMCE for generating HTML content. While I've only used it on admin pages so far, I'm now cons ...

htmltagstinymcesecurity

Facing issues with @material-ui icons not being properly resolved on Windows OS

I am trying to incorporate Material UI into my React code, but I keep running into an issue. The error message reads: Module not found: Can't resolve '@material-ui/icons/Search' in 'C:\Users\Dominik\code\facebook&bs ...

reactjsmaterial-ui

Is it possible to attach the payload to the beginning of a slice in the extraReducer using React Toolkit?

Using createSlice, I have created a slice and want to add the payload to the root of this slice. If we consider this slice as "payments" and the initial state is an empty object ({}), my goal is to store all payments inside this object in arrays. const ini ...

reactjsreduxstateredux-toolkittoolkit

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Tips for saving the visibility status of a <div> in your browser bookmarks?

Currently, I am in the process of developing a single webpage (index.html). The navigation bar at the top includes links to hash references (DIV IDs). If JavaScript is enabled, clicking on these links triggers a JavaScript function with the onclick attribu ...

javascripthtmlcssbrowserbrowser-history

A webpage layout featuring an HTML table enhanced with JavaScript functionality

Hi there, I'm new to Javascript and looking for a way to simplify my code. Is there a way to use a loop to change the id values in HTML without manually editing them one by one? Here's what I have so far: <table border="2" cellpadding="4"> ...

javascripthtml

Should hidden inputs be utilized in emails for better results?

I'm looking for a solution to link the content of an email message with an object in my software, such as a comment. I want users who reply to a comment via email to have their message appear in the system as a comment. My current idea is to use hidde ...

htmlemailhtml-email