Objective: Implement an iframe displaying a YouTube video with play/pause functionality for users.
Issue: Unable to interact with main content, but works correctly when placed in Navigation or Footer components.
Attempted Solutions: Explored various debugging methods to identify the problem, but now stuck on next steps
Here is the functional code snippet from the Navigation component :
import React, { useState } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
// Code continues...
export default Navigation;
And here is the code snippet from the Whitepaper component that presents issues:
import React from "react";
import {Container, Row, Col} from "react-bootstrap";
import wp_1 from "../Assets/wp_1.png";
// Code continues...
export default Whitepaper;
Despite trying different approaches, I am still facing the challenge of not being able to click on elements within the iframe. The cursor shape remains unchanged and interactions are limited. Text selection and right-click functions work as expected.
I have checked the CSS file for any instances of pointer-events: none;, but no such declarations were found.
What could be causing this unexpected behavior?