Event listener for iframe video player click in Angular 2+

I have a video iframe that starts playing automatically when the page loads:

<section>
  <div class="row" >
    <div style="padding-top: 56.25%">
      <iframe
        src="https://players.brightcove.net...&autoplay&muted&allowfullscreen&webkitallowfullscreen&loop&fullscreen"
        allowfullscreen
        webkitallowfullscreen
        mozallowfullscreen
        allow="encrypted-media"
        style="
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        "
      ></iframe>
    </div>
  </div>
</section>

I am looking to trigger a function when the video is clicked by the user. Essentially, I want to navigate away from this component whenever the video is clicked (as it functions as a screen saver). How can I adjust the component to achieve this?

The issue I am facing is that the events on the outer divs are not triggered when the video is playing in the iframe. Upon clicking, it simply pauses/plays the video.

angulartypescriptiframehtml5-video

Answer №1

Here's the solution: place a div on top of the iframe and handle the click event

<section>
  <div class="row" >
    <div style="padding-top: 56.25%">
      <iframe
  src="https://players.brightcove.net...&autoplay&muted&allowfullscreen&webkitallowfullscreen&loop&fullscreen"
        allowfullscreen
        webkitallowfullscreen
        mozallowfullscreen
        allow="encrypted-media"
        style="
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        "
      ></iframe>
      <div style="
          z-index: 1;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        "
        (click)="doTheThing()"></div>
    </div>
  </div>
</section>

Fortunately, being in fullscreen mode simplifies ensuring the overlay is on top of the iframe. If you control the source, you can directly access the iframe's contentDocument.body and attach an event listener to it.

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

Angular authentication guard does not redirect properly after returning a Promise<UrlTree>

My authentication guard is set up to control access to the /sign-in and /verify-email routes, allowing only users who are not logged in or have not verified their email: export const signInGuard: CanActivateFn = (activatedRouteSnapshot: ActivatedRouteSnap ...

node.jsangulartypescriptnpmangular2-routing

Error encountered when Angular Image stops working in Docker container

My Docker image is running Node Version v12.3.0 and NPM version 6.9.0. The package.json file below contains all the dependencies for the app: { .. }, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.5", "@angular/animations": " ...

angulardockernpm

Place the video element within the Canvas element

I'm trying to incorporate a video player on Canvas. My video has an alpha channel, and I want to play it over a jpg image. This is the code snippet I've put together: <video id="mainVideo" src="item0.mp4"> </video> <canvas id="m ...

htmlcanvashtml5-canvashtml5-video

Verify enum values within controller function

I am dealing with a query parameter in my REST API that should be restricted to specific values according to an enum type. I need to find a way to handle a "Bad Request" error if the client provides any value outside of this enum. Here is what my enum loo ...

typescriptrestnestjs

What steps can I take to prevent ng-bootstrap modal from automatically centering the content within the modal?

Looking for a solution to a UX issue with my Angular ng-bootstrap modal. The problem arises when displaying messages of varying lengths - if the message is longer than the screen's vertical resolution, it gets centered on the screen. This causes incon ...

cssangularng-bootstrap

Component that can be used multiple times to load data

I am currently working on a react/nextjs/redux application where each component needs to call a different backend API. The main challenge I am facing is the lack of reusability in loading data components due to some repetitive code that I would like to el ...

reactjstypescriptnext.js

Assigning fields dynamically based on a generic string union concept

My goal is to create a function that can dynamically add fields and functions to an object based on arguments provided. However, I'm encountering an issue where the function does not recognize the types of these dynamic fields. Here's a simple ex ...

typescriptstringgenericsunionmapped-types

Angular: A module in the library declares an HttpInterceptor that intercepts requests that are made outside of the

I am encountering an issue with Angular where a custom instance of HttpInterceptors within an Angular library is intercepting requests for HttpClient calls made outside the library (i.e. in the consuming application). I'm finding it difficult to gras ...

angulardependency-injectionangular-httpclientangular-http-interceptorsinjection-tokens

Iframe displaying a blank white screen following the adjustment of document.location twice

I am in the process of developing a web application that I intend to integrate into my Wix website. The main components of the required web application are a text screen and a button to switch between different screens/pages (html content). However, I am ...

javascripthtmliframe

The AnimationRendererFactory ahead-of-time (AOT) compilation is encountering an issue where it is unable to access the property 'create

I am encountering an issue while trying to compile my Angular4 app AOT. The error message that I am stuck on is: TypeError: Cannot read property 'createRenderer' of undefined at AnimationRendererFactory.createRenderer (http://localhost:8080/cwp/ ...

angular

Is it possible for a hybrid app using Angular 7/1.x to enable Hot Module Replacement (H

Having trouble implementing HMR on a hybrid Angular application using the downgradeModule strategy. I previously sought help from a similar question on Stack Overflow Can an Angular 5/1.x hybrid app support HMR? but didn't find a satisfactory answer. ...

javascriptangularjsangularwebpack-hmr

Generating a new object from a TypeScript class using JavaScript

Currently, I am facing an issue while attempting to call a JavaScript class from TypeScript as the compiler (VS) seems to be having some trouble. The particular class in question is InfoBox, but unfortunately, I have not been able to locate a TypeScript d ...

javascripttypescript

What is the correct method for integrating jQuery libraries into an Angular project version 10 or higher?

Currently, I am facing difficulties while attempting to install the jquery and jquery-slimscroll packages into an Angular project (version greater than 10). It appears that the installation of these packages has not been successful. In light of this issue, ...

javascriptjqueryangularnpmpackage

Issues arising with utilizing Github for hosting Angular applications

After developing a site with Angular, everything was running smoothly on my local host. However, when I decided to host the site on GitHub, two errors appeared. You can access my site through this link: Here is a screenshot of the errors encountered [1]: ...

angulartypescriptgithubhosting

navigating through different pages on a react-native application

While building my app in react-native, I encountered some issues with setting up the navigation. I referred to the react-native documentation for guidance, specifically this navigation guide. The guide mentioned passing an object named "navigation" to your ...

typescriptreact-nativenavigationreact-navigationreact-typescript

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...

javascriptangularrxjs

The process of setting up a dynamic cursor in ReactFlow with Liveblocks for precise zooming, panning, and compatibility with various screen resolutions

The challenge lies in accurately representing the live cursor's position on other users' screens, which is affected by differences in screen resolutions, zoom levels, and ReactFlow element positioning as a result of individual user interactions. ...

typescriptnext.jsreact-flow

Unforeseen results arise when using the ng-if directive on a DIV element within an Angular context

@angular/upgrade/static Attempting to upgrade an AngularJS controller to Angular context using UpgradeModule from '@angular/upgrade/static' Encountering issues when changing ng-show to ng-if on span or div elements, as the enclosed content does ...

angularjsangularangular-upgrade

URL specifically for an embedded iframe

My organization's local website features a variety of link buttons on the index.php page, all of which open within an iframe on the same index page. When the index page loads, the iframe displays the 'home.php' page. Now, I am trying to prov ...

phphtmliframe

The concept of window.trustedtypes is not defined within the Firefox browser

My application has successfully integrated trusted types. It is functioning well in Chrome, however, I am encountering an error in Firefox where it says "window.trustedtypes is undefined". Can anyone provide guidance on how to address this issue? ...

angularsecurityfirefoxxsstrusted-types