Display Google Maps and YouTube videos once user consents to cookies

I recently installed a plugin on my WordPress site called Cookie Notice, which I found at this link. So far, I've been impressed with how user-friendly and lightweight it is.

Due to the latest GDPR regulations, I now need to figure out a way to hide Google Maps and YouTube videos until visitors accept cookie consent. Unfortunately, the plugin doesn't offer this feature.

Does anyone have any suggestions or sample code on how to handle embedding Google Maps and YouTube videos in this way? The plugins available for this can be quite expensive, around $99 per year, for just one map and video on my homepage...

javascripthtmlcsswordpress

Answer №1

Are you familiar with Jquery? Here's a suggestion on how you could approach it.

var cookiesAccepted = false;

To hide media, add the 'media-blocks' class to all the media elements you want to hide. Then, use jquery to monitor the Cookies bar for clicks on the accept button. Once clicked, add a class that displays all the embedded media you initially wanted to hide, like this:

$('#cookie-btn').on('click',function(){
  var cookiesAccepted = true;
  $('.media-blocks').addClass('show');
})

This is just a rough idea of how I would tackle this task.

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

Utilizing JavaScript/jQuery to activate a Bootstrap navbar post-page load

Having trouble triggering Bootstrap's navbar with plain JavaScript/jQuery while using Bootstrap 3.3.6 and jQuery 1.11.3. The data structure provided for my application cannot be modified in terms of adding classes or ids. <ul> <li ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips on retrieving specific information from PHP through jQuery AJAX

I have encountered an issue with my JavaScript file where I am sending an array of data to my PHP file. The problem is, when trying to print the name in #NAME and password in #PASSWORD, both values end up in both fields. You can see how it currently displa ...

javascriptphpjqueryajax

Looking to remove a row with php, html, and ajax?

Trying to remove a row from an HTML table has been my latest challenge while working with Materialize CSS. Here is what I have so far, where the ID corresponds to the employee ID: https://i.stack.imgur.com/rjwba.png Below is the code snippet: <?php ...

javascriptphpmysqlajaxmaterialize

Creating a clickable image map for the footer

I have successfully made a navigation bar fixed to the bottom right of the page. However, when I attempted to create an image map out of it in Dreamweaver, the image did not appear for me to draw around. I considered doing it manually, but then questioned ...

htmlcss

How to retrieve values/keys from a JSON object dynamically in JavaScript without relying on fixed key names

shoppingCart = { "Items": 3, "Item": { "iPhone 11 Pro": { "productId": 788, "url": "http://website.com/phone_iphone11pro.html", "price": 999.99 }, "Bose Noise Cancelling Headphones": { ...

javascriptjqueryjsonobjectjsonparser

Using both PHP $_POST and $_GET in a form submission for enhanced functionality

My preferred programming language is PHP. I am currently working on a form and once it is submitted, I want it to redirect to a specific URL with a $_POST variable attached at the end (formatted as a $_GET), for example: http://example.com/page.php?my_ke ...

phphtmlforms

Using React and graphql to show information on selected options across components

Currently, I'm facing a challenge in determining my next step. In productList.js, there is a straightforward select dropdown class component that displays all data from Products (id, name, brand,vintage) using graphql(apollo). It successfully sho ...

javascriptreactjsgraphqlreact-apollo

Validation in Laravel appears to be ineffective when managing schedules

I have a table that contains schedules for each subject. I want to ensure that every schedule is unique and not duplicated. The table includes columns for room, teacher, time, day, and checker who verifies the schedule. It's essential that there are n ...

javascriptphpmysqllaravelvue.js

How can I retrieve the id of a Jquery Object (this) in a JavaScript file?

I have been experimenting with a content carousel slider for my project. Everything has been working smoothly so far. However, I now need to include the same slider twice on a single page. To prevent conflicts caused by similar class names used by the Jav ...

jqueryhtmljquery-slider

Is there a way to display a success message once the button has been activated?

<template> <div> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Enter ...

javascriptnode.jsvue.js

When I clicked on the event in Javascript, the result was not what I expected

I am currently working on a web project centered around cooking recipes. In order for users to add ingredients to their recipes, they must input them one by one into a dynamic list that I am attempting to code using jQuery (AJAX). My issue arises when a u ...

phpjavascriptjqueryajax

A Simple Guide to Setting a Background Image in React Native with the Nativebase.io Library

What is the process for including a background image in React Native with the help of the Nativebase.io Library? I have a specific screen where I need to incorporate a background image, with all other elements positioned at the center of the image. ...

javascriptnode.jsreact-native

Ajax failing to trigger upon submission

I need assistance in creating a form that will first submit via AJAX before directing to a specified URL. Once submitted, an email should be sent to me through newsletter.php <script type='text/javascript'> $(function () { $("#signup") ...

javascriptjqueryajax

Uncover the hidden href link that has been obscured using the code javascript:void(0)

Currently, I am in the process of developing a straightforward PHP script to extract the actual link from a website that conceals the real link/key using the javascript:void(0) approach. Upon inspecting the source code, I noticed that the href link is empt ...

javascriptphpjquery

Using JavaScript to create a tree structure with hierarchical organization in JSON

Having some trouble converting a nested hierarchical tree from a JSON array. Looking to create a hierarchical tree structure from the provided JSON data. Below is the data: [{ "_id" : "59b65ee33af7a11a3e3486c2", "C_TITLE" : "Sweet and Snacks", ...

javascriptjson

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

javascriptjqueryhtmlcsssvg

Mobile browser viewport dimensions

My Nexus 5 shows a width of 360 when I visit . I am aware that there is a difference between my phone's resolution and the browser width. Despite this understanding, I encounter a problem when attempting to create a function that triggers at a width ...

javascriptjquerydevice-width

Ajax is displaying some unusual behavior

Currently, I am working on an ajax request to check if a specific combination of username or password exists. <script> $("form").submit(function(e){ e.preventDefault(); //send data to ajax file now $.ajax({ type: 'POST ...

javascriptphpjqueryajax

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss