Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

.wrapper-noaction {
    position: absolute;
    margin-top: -558px;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

.video-stat {
    width: 94%;
    margin: 0 auto;
}

.player-control {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1000;
    height: 7.5%;
    padding-top: 8px;
}

.control {
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    color: #fff;
}
<div class="video-stat">
    <div class="row">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="ytplayer" class="embed-responsive-item"></div>
            <div class="wrapper-noaction"></div>
        </div>
    </div>
    <div class="row">
        <div class="player-control text-center">
            <span class="control" (click)="play();start=!start"><i class="icon-control-play" [class.icon-control-play]="start" [class.icon-control-pause]="!start" aria-hidden="true"></i></span>
            <span class="control" (click)="stop();start=true"><i class="fa fa-stop" aria-hidden="true"></i></span>
            <span class="control" (click)="volume()"><i class="icon-volume-2" [class.icon-volume-2]="!ismuted" [class.icon-volume-off]="ismuted" aria-hidden="true"></i></span>
        </div>
    </div>
</div>

Hey there! I am utilizing Angular 2 ytplayer to embed YouTube videos in my current project. My goal is to restrict users from clicking or right-clicking on the video player. To achieve this, I have added a transparent layer over the video player so that interaction is limited. While this solution works well for medium screen sizes, it does not adapt effectively to different screen sizes. Can you assist me in making this implementation responsive across all screen sizes, ensuring that users are unable to right-click on the player regardless of the device being used?

javascripthtmlangularcsstwitter-bootstrap-3

Answer №1

If you want to prevent users from clicking on a video, consider placing it in the background with this code snippet:

<div id="bgndVideo" class="player" 
     data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">
</div>

You can learn more about this technique here.

If the above method doesn't work, you may need to create a directive that intercepts the click event and handles it differently. Keep in mind that this workaround might not be effective if the video is played in fullscreen mode.

Best regards,

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

Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

This inquiry was previously addressed in this thread: Threejs: assign different colors to each vertex in a geometry. However, since that discussion is dated, the solutions provided may not be applicable to current versions of three.js. The latest versions ...

javascript3dthree.js

React Material-UI components (Slider/Select) "onChange" event does not update the value instantly, it shows the result of the previous click

My goal is to utilize Slider/Select for capturing user query parameters, which will then trigger changes in the URL (via handleChange) and subsequently make API calls using fetch hooks. However, I've encountered an issue where adjusting the Slider va ...

javascriptreactjsreact-hooksmaterial-ui

Code snippet for replacing text enclosed between two tags using regex in PHP programming language

While I am not an expert in regex, I am attempting to develop a code inspired by examples I have come across. My goal is to replace instances of the string <li> with <li class="ingredient"> within a WordPress table. However, this replacement mu ...

phphtmlregexwordpressreplace

Installing a package from GitHub with a specific tag using NPM

Is there a way to install npm into my angular2 project from a git repository using a specific tag like tag = 6.0.0? For example: git <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dabdb3ae9abdb3aeb2afb8f4b9b5b7">[email ...

gitangulargithubnpm

If the image is not found, deactivate the anchor or hyperlink

I am encountering an issue where I have an image tag within an anchor element setup as shown below: <a href='$image'><img alt='No Image' src='$image'></a> When the image is not available, I can still intera ...

javascriptjqueryhtmlimageanchor

What is the procedure for utilizing the comparator to arrange items according to various attributes?

I am trying to find a way to arrange my models in a collection based on their required flag and then alphabetically by their value. This is what my current code looks like: var myModel = Backbone.Model.extend({ defaults: { required: true, ...

javascriptsortingbackbone.jscomparator

What is the best way to show mat-select choices above a dialog box?

In my quest to find a solution, I came across this approach in the global css file: .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 10000; } However, this method seems to cause issues with other dialog windows (such as the MatDatepicker ...

angularangular-materialangular-material-7

What are the best practices for utilizing an array of routes?

I'm new to working with react but I noticed something strange. My routes are currently set up like this: <Main> <Route exact path="/home" component={Home} /> <Route exact path="/home1" com ...

javascriptreactjstypescriptreact-router-dom

Guide to positioning a border with CSS

How can I align a border to the right in this code? This is the CSS snippet that I currently have: p { text-align: right; color: #757575; Background-color: #FFFFFF; font-size: 2.4em; width: 50px; } <p>Home<br> <a href="aboutu ...

csshtmlalignmentborder

Exploring the power of JavaScript template literals within the Document Object Model

I am curious as to why this particular template literal is not functioning correctly when I try to implement it using JavaScript DOM for styling CSS. Any assistance in helping me understand this issue would be greatly appreciated! let weatherColors = [& ...

javascript

Loop through the input fields using ng-repeat while maintaining consistent values for each iteration

I am facing an issue with my ng-repeat loop where I have a comment input inside it. The problem is that when I start typing in the first input, the text appears simultaneously in all other inputs as well. I have tried adding a unique ID but it didn't ...

javascriptangularjs

A guide to JavaScript: Fetching and Parsing JSON Data from an API

Hey there! I've been working on using this code snippet in my defult.js file to call an API, but I'm having trouble figuring out how to read the output. It always seems to end up in the last else part. function fetchDataDist(APPID, flag, call ...

javascriptnode.jsjson

AngularJS: incorporating various functionalities within a single controller

I have a basic AngularJS controller that I am working on, and I would like it to include two separate functions: var app = angular.module('searchApp', []); app.controller('searchCtrl', function($scope, $http, $log) { //Function 1 ...

javascriptangularjs

Discovering if a page can be scrolled in Angular

Hey there, I recently started working with Angular and created an app using the angular material stepper. The issue I'm facing is that some of the steps have longer content, causing the page to become scrollable. I am now trying to find a way to deter ...

javascriptcssangulartypescriptangular-material

Update the content of a bootstrap modal dialog following a successful upload

As part of a new service, I am modifying data in a database using a bootstrap modal dialog. However, I'm facing an issue where the name of a recently uploaded file is not appearing in the modal dialog body until I close and reopen it. Is there a way t ...

javascriptajaxasp.net-mvcmodal-dialogbootstrap-modal

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

cssnode.jscommand-linenpm

A JavaScript function that fetches the color name based on either the RGB value or the Hexadecimal value

Looking for a JavaScript function that can determine the name of a color. Would like the JavaScript function to be structured as shown below: function getColorName(r, g, b) { .... return <color name>; // such as blue, cyan, magenta, etc. } ...

javascript

Monitor Changes with Grunt: Be Prepared for Some Waiting!

My Grunt watch task is experiencing significant delays between detecting a file change and starting to work. Output similar to the following is frequently seen: >> File "src/static/app/brandManager/addChannel.html" changed. Running "html2js:main" ...

javascriptgruntjsgrunt-contrib-watch

Unable to align text within a DIV using CSS

Recently, I started learning jQuery and building my own website. You can find my project on JSFIDDLE. The issue I'm facing is that when hovering over a new div, the text extends beyond the borders of that div instead of staying within it. I've sp ...

javascriptjqueryhtmlcss

Ways to delete a tag with jQuery

Currently I'm struggling with hiding elements like delpc and picnam. Here is the structure of my code: <ul id="userpic" class="user pic"> <im class="pict"/> Picture preview </ul> <div id="showpicname"> <div id= ...

jqueryhtml