HTML: Adjusting video dimensions to fit iFrame?

After loading the video from YouTube, I noticed this outcome: https://i.sstatic.net/3Vbtd.jpg When I tried loading the same video from Cloudinary, the result was different: https://i.sstatic.net/iNGoe.png ISSUE: Despite being the exact same video, the video loaded from Cloudinary does not fill the entire iframe window.
Here is the code for both implementations:

<iframe
className="embed-responsive-item"
src={
  generic_profile.videoURL == undefined
    ? "https://www.youtube.com/embed/wYxDJOFgDw0"
    : cloudinayURL
}
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>

NOTE: This is in the context of ReactJs.
QUERY: Is there a solution to this discrepancy?

htmlcssreactjsiframebootstrap-4

Answer №1

My issue was resolved by simply utilizing the video tag:

 <video controls="true" class="embed-responsive-item">
                <source
                  src={
                    generic_profile.videoURL == undefined
                      ? "https://www.youtube.com/embed/wYxDJOFgDw0"
                      : generic_profile.videoURL
                  }
                  type="video/mp4"
            /> <!---everything is working perfectly now--->
          </video>

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

Submit the image to the server independently from the form

Currently, I am faced with an issue while working on image upload functionality in my React app using Node and Express for the backend. Within my React component, I have a form containing an input type file and a submit button. My goal is to first upload t ...

javascriptnode.jsreactjsformsexpress

The bottom section of the webpage fails to follow the CSS height or min-height properties

Taking into account the question I raised earlier: How can a div be made to occupy the remaining vertical space using CSS? I received an answer which I have been experimenting with lately: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt ...

csshtml

Running Python in React using the latest versions of Pyodide results in a malfunction

As someone who is new to React and Pyodide, I am exploring ways to incorporate OpenCV functionality into my code. Currently, I have a working piece of code that allows me to use numpy for calculations. However, Pyodide v0.18.1 does not support OpenCV. Fort ...

javascriptpythonreactjspyodide

What is the best location for the frontend server code within an application built using create-react-app?

After using create-react-app to create my app, I am looking to log messages in the server console. Any advice on how to achieve this? I attempted adding index.js to the root folder and creating a server folder, but so far it hasn't been successful. ...

javascriptnode.jsreactjscreate-react-app

Using createContext in React.tsx to pass the state through useState

There is a context called Transaction that accepts an object and a function as parameters. In the AppProvider component, the Transaction.Provider is returned. The following code snippet is from the GlobalState.tsx file: import { createContext, useState } f ...

javascriptreactjstypescripterror-handling

Tips for retrieving xmlHttp.responseText when initiating an AJAX request within an IFrame

Can anyone please advise on how to retrieve xmlHttp.responseText when calling from an IFrame? When I call the server from outside the IFrame, I receive the responseText with no issues. However, when calling from within the IFrame, I am getting an empty re ...

phpajaxiframe

Reverse all elements on the page except for ::selection

Is there a way to invert the page while keeping text selection unchanged? I attempted to use ::selection to exclude it, but was unsuccessful. Below is the CSS code I used for inverting the page: html { background-color: #131313 !important; filter: cont ...

css

Using jQuery to append a single AJAX response at a time

I wrote a piece of code that utilizes an ajax request to communicate with json-server, retrieving data which is then displayed in an html div using jquery .html(). The content shown in the div depends on the button clicked by the user. While .append() work ...

javascriptjqueryhtml

What is the best way to dynamically import two css frameworks in React?

Currently, I am involved in a project that requires me to incorporate a button for toggling between Bootstrap and Foundation at the request of my client. After exploring several alternatives, I have determined that utilizing hooks to manage the state of e ...

reactjstypescriptimport

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

javascripthtmlcss

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

jquerycssjquery-uistylesheet

If a radio button is either selected or deselected, a jQuery alert will display the value of the radio button

When a user logs into the system, there is a radio button that is almost checked. I want to create an alert when the user clicks the button to show whether it is checked or unchecked. This is the HTML code for the radio button: <input id="radio1" name= ...

jqueryhtmlradio-button

The logout function in my React application isn't functioning properly, yet it seems to be working fine when

On my application page, I have a logout button in react. When clicked, the onClick event handles the request as shown below: async function logOutHandle(e){ e.preventDefault(); try { const response = await axios.post("http://loca ...

reactjsexpresscookiesexpress-jwt

Finding the variance in the given situation is as simple as following these steps

To find the variance between the "Total Marks" in a question and the input texts for each answer, we need to consider specific scenarios. Firstly, if a question has only one answer, the text input should be displayed as readonly with the same value as the ...

phpjavascriptjqueryhtml

Expo Doctor is not supported, and the Expo-CLI doctor is unable to resolve dependencies

I'm having trouble running npx expo doctor $ npx expo doctor $ expo doctor is not supported in the local CLI, please use expo-cli doctor instead I attempted to use expo-cli doctor --fix-dependencies but it doesn't seem to have made any change ...

reactjsreact-nativenpmexpo

Tips for hiding the bottom bar within a stackNavigator in react-navigation

I am facing a challenge with my navigation setup. I have a simple createBottomTabNavigator where one of the tabs is a createStackNavigator. Within this stack, I have a screen that I want to overlap the tab bar. I attempted to use tabBarVisible: false on th ...

javascriptreactjsreact-nativereact-navigation

I'm confused about what I did wrong with Node.js. The server.js is up and running, but I'm unable to view the

I have made some progress so far and I am currently running this code on Putty. var http = require('http'); var fs = require('fs'); const PORT = 8080; http.createServer(function(request, response) { var url = request.url; switc ...

javascripthtmlnode.js

What is the best way to create a button that will trigger a modal window to display a message?

I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not prod ...

javascripthtmlcss

Guide to building a straightforward line graph using JSON data from a server

When I retrieve price change data from an API endpoint using axios, the response I receive is in the following format: 0: (2) [1639382650242, 48759.49757943229] 1: (2) [1639386250855, 49131.24712464529] 2: (2) [1639389730718, 48952.65930253478] 3: (2) [163 ...

javascriptreactjschartsnext.js

How to modify the color of a div element with jQuery?

I need some help changing the color of a div with 'jQuery', but I am not sure how to do it. Below is the code I have been trying: function updateDivColor() { $('#OutlineX1').css("color","blue"); } ...

javascriptjqueryhtmlcss