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

What is it about this JavaScript code that IE8 seems to have a problem with?

Encountered an error in IE8 that has been causing trouble for me SCRIPT65535: Unexpected call to method or property access. load-scripts.php, line 4 character 25690 After removing a .js file from the code, the error disappeared. By commenting out f ...

javascriptjqueryinternet-explorerinternet-explorer-8

Issue: Compilation unsuccessful due to an error in the Babel loader module (./node_modules/babel-loader/lib/index.js). Syntax error

I'm currently exploring how to integrate the Google Maps Javascript API into my VueJs project without relying on the vue2-google-maps package (as it seems too restrictive to me). Here's what I've done so far, after registering my Vue compon ...

javascriptvue.js

What is the timing for running tests using Yeoman AngularJS framework?

Recently, I created a compact Yeoman AngularJS project. Whenever I enter the command grunt serve, the application is launched and displayed in the browser. Surprisingly, whenever I make adjustments to a test, Grunt automatically reruns the test and provide ...

javascriptangularjsgruntjsyeomankarma-runner

Conceal overflow content within a Bootstrap btn-group using CSS styling

Suppose I have a table like the one below: /* CSS Styles for the table */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding ...

jqueryhtmlcssangularjstwitter-bootstrap

What is the best way to shrink or enlarge individual sections of the accordion?

Exploring AngularJs Accordions I'm struggling to understand how to control accordions in AngularJS. I have a step-by-step module set up as an accordion and I want to collapse one part while expanding another based on completion. Here is the accordion ...

javascriptangularjsaccordion

Invalid prop type: A form field received a `checked` prop without a corresponding `onChange` handler

In my project, I have a Parent Component called CandidateList and a Child Component called Candidate. The CandidateList component has a Select All checkbox that triggers a function to set the state when candidates are being selected, and then passes that s ...

javascriptreactjs

Error injecting Angular components

Here is the structure of my HTML file: <html> <head> <title>PLD Interaction pattern</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body ng-app="myT ...

javascriptangularjs

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

Is that file or directory non-existent?

While working on developing a Discord bot, I keep encountering an error message stating: "Line 23: no such file or directory, open 'C:\Users\Owner\Desktop\Limited Bot\Items\Valkyrie_Helm.json']" even though the filep ...

javascriptnode.jsnpmdiscorddiscord.js

What is the best way to single out a specific item from a list to display in a component upon clicking in Vue.js?

To view the data of a specific item in the child component "comandasInd", I just need to click on the icon. <template> <v-data-table :items="comandas"> <template v-slot:items="props"> <td>{{ props.item.nombre }}</td& ...

javascriptfirebasevue.js

a script in JavaScript that retrieves the selected value from a radio button box

I have an AJAX table where I need to highlight one of the rows with a radio box on the left side. However, I lack proficiency in JavaScript and would like assistance in retrieving the value of the radio box by its ID from this table once it has been select ...

phpjavascriptajax

Struggling to create a line break within an SVG using the <tspan> element?

I have a pair of text lines that are wrapped in <tspan> tags. <tspan dy="-11.7890625">welcome</tspan> <tspan dy="16.8" x="285.75">text</tspan> I am trying to add a line break between them, but the <br> tag is not worki ...

javascripthtmlsvg

Suggestions for a JavaScript tool that automatically crops images

Is there a tool available, either browser-based or in Java, that can analyze an uploaded image, identify different characters within it, and crop them out into separate images? For instance, if this image contains three unique runic symbols, I would like ...

javascriptjqueryimage-processingvue.jsmarvin-framework

Ways to track all requests completed in Nuxt 3

I am looking to create a unique loading page that conceals itself once all requests and static data have been loaded, including static images and libraries. How can I determine when all requests and static data have finished loading? I have attempted the ...

javascriptvue.jsnuxt.js

Click function for mat-step event handler

Is it feasible to create a click event for the mat-step button? I want to be able to add a (click) event for each mat-step button that triggers a method. Essentially, I am looking to make the mat-step button function like a regular button. You can find mo ...

angulartypescriptangular-material

Open the HTML page from a separate directory

I'm facing an issue with loading additional HTML onto a page in my project when a link is clicked. The HTML fragment file I want to load is stored in a different folder within the project structure. Despite my efforts, I keep encountering a 404 error ...

javascriptjqueryajax

Obtain GPS coordinates (latitude/longitude) from a Google map by dropping a marker on the

Is there a straightforward script that can load a Google Map and, when clicked, display a marker that saves the latitude and longitude values to a variable? Does anyone know if there is an existing PHP solution for this functionality? Appreciate any help ...

javascriptphpgoogle-mapsgoogle-maps-api-3

Concealing the rear navigation button within the material carousel

I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...

javascriptjqueryhtmlcssmaterial-design

What is the method for indicating the data type in an XDR request?

Currently, I am successfully using XDR for cross domain resource sharing in IE. However, I am facing an issue with specifying the return dataType to receive JSON as responseText. Below is the snippet of my code: if (window.XDomainRequest && $.browser.m ...

javascriptajaxinternet-explorercross-domainxdr

Angular not detecting changes in string variables

Issue with variable string not updating var angulargap = angular.module("angulargap", []); angulargap.factory('cartService', function($rootScope,$http){ var fac ={ message:"factory", getCart:function(call){ $h ...

javascriptangularjs