Using Javascript to conditionally hide a Vimeo iframe with an if-else statement

Hey amazing developers,

I've been working on a cool thumbnail grid with an expanding view.

Check out an example here.

Within the expander, I added a video section that retrieves its video ID through an HTML5 data-attribute. Here's how it looks in HTML:

<div id="test" class="videoPlayer"> iframe code here </div>

My current issue is that if no video ID is defined, I get the Vimeo error iframe (the one that says "Sorry we can't find your video"). Now, I'm trying to find a way to hide that video if the iframe code is present.


            if ( document.getElementById('test').innerHTML === 'iframe width="560" height="315" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://player.vimeo.com/video/?title=0&byline=0&portrait=0" /iframe' ){
                document.getElementById('test').style.display = 'none';
            } else {
                // do something else
            }

I'm not sure if this is even possible, but it's the best solution I could come up with. Thanks a lot in advance!

javascriptvimeocustom-data-attribute

Answer №1

document.querySelector('#test').style.display = 'none';

There is no such property in plain JavaScript (it is jQuery), so you should use this instead:

document.querySelector('#test').style.display = 'none';

Also, your method to check if the iframe exists is invalid. To do it correctly, try this instead:

if (document.querySelector('#test').innerHTML.indexOf('http://player.vimeo.com/video/?title=0&byline=0&portrait=0') !== -1)

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

Tips for saving HTML data locally

Is there a way to persist my HTML element tag data even after the user closes the browser? For example: <div class="classOne" data-random="50"> If I use jQuery to change the data attribute like this: $(".classOne").attr("data-random","40") How ca ...

javascriptjqueryhtml

Loading textures locally using three.js is functioning properly, however, remote loading is not functioning as

I have customized an official example for the Loader object to showcase a specific issue. My goal is to generate a mesh with a texture map that loads before creating the geometry. Currently, I am facing a problem where local files load properly, but remote ...

javascriptimageasynchronousthree.jstextures

What is causing the premature termination of the for loop?

I am currently utilizing Node.js (with nodemon as the server) to upload an excel file, parse its contents, and then send each row to a MongoDB database. The total number of rows in the array is 476, however, the loop seems to stop at either 31 or 95 withou ...

javascriptnode.jsexpress

iPhone 6 (iOS) users may face compatibility issues with iframe and fancy box features

I am currently learning how to use jQuery and the fancybox library. In my Angular 1 and Ionic project, I have successfully implemented fancybox with an iframe. Everything works perfectly on browsers and Android devices, but on iOS, a loader icon appears an ...

javascriptjqueryangularjsfancybox

Add an array as a nested child within another array using node.js and JavaScript

Description: I execute a MySQL query to retrieve rows from a table > connection.query(q2,function(err,rows){...} Assuming the rows have a structure like {id:",,,", time:"..." etc:"cc"} For each row, I then query another table to fetch additional dat ...

javascriptmysqlnode.js

Leveraging AngularJS and PhoneGap for seamless Facebook login/SDK integration even without the need for a server

In the process of developing a web application that will be deployed with Phonegap, I am utilizing NodeJS on the backend and AngularJS on the frontend, incorporating Facebook authentication. Currently, the Node server is running at localhost:3000 (will eve ...

javascriptfacebooknode.jsangularjscordova

How to Process a Stripe Payment using jQuery AJAX (JavaScript Only)

I'm in the process of creating a custom payment form for Stripe and I want to manually initiate the AJAX call to connect with Stripe. Instead of relying on a typical submit event. Unfortunately, it seems like I might be sending the request to the inc ...

javascriptjqueryajaxstripe-payments

How can I prevent users from inputting negative numbers in a cellEditable material-table?

In my project, I am utilizing a material table with editable cells. I need to implement a restriction that prevents users from entering negative numbers in the field and displays an error validation message. How can I achieve this functionality? Check out ...

javascriptreactjsmaterial-uifrontendmaterial-table

What triggers the invocation of the onerror handler in XMLHttpRequest?

I am facing a bit of confusion when trying to understand the functionality of XMLHttpRequest's handlers. After reading the specification regarding the onerror handler, it mentions: error [Dispatched ... ] When the request has failed. load [Dispa ...

javascriptajaxxmlhttprequest

The problem persists as Vite is failing to load CSS codes enclosed within VUE components

My project is developed using Laravel, Inertia.js with Vue, and Vite for bundling the frontend assets. Everything seems to be working fine with the application, except when I try to access it from a subdirectory. In this scenario, Vite fails to load the C ...

javascriptvue.jsviteinertiajs

Executing an Ajax request to a document containing <script> elements

Recently, I developed a sample page that effectively mimics table layout pages but without relying on the traditional mobile-unfriendly table features. The structure of the page is as follows: <html> ... <body> <div type="page" ...

javascriptjqueryajax

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascripthtmlcssangularjs

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Recently, I encountered an issue with a simple code snippet that seems to produce inconsistent results. Take a look at the function below: addDays(date: Date, days: number): Date { console.log('adding ' + days + ' days'); con ...

javascriptdatedatetimetimetypescript

When utilizing Vue JS, each key value of one computed property can trigger another computed property to run

I have a computed property: getRelatedItem () { return this.allItems.find((item) => { return item.id === this.currentSelectedItemId }) }, Here is an example of the output: relatedItem:Object -KQ1hiTWoqAU77hiKcBZ:true -KQ1tTqLrtUvGnBTsL-M:tr ...

javascriptvue.jsvuejs2vue-component

The hover effect is not functioning properly after loading jQuery with load();

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements. It's a dynamic menu setup, as shown below: <div id='main-menu'> <ul> <li class='click ...

javascriptjquerycss

Difficulty encountered while implementing mouseover event listener for an SVG component

I'm having trouble triggering an event for an svg element. Here's the link to my jsfiddle example: https://jsfiddle.net/r1ahq5sa/ Here's the HTML code: <div class="row"> <div class="col-md-8"> <svg class="video-nav-bar ...

javascript

Leveraging data schemas to manage the feedback from APIs

I am curious about the benefits of modeling the API response on the client side. Specifically: First scenario: const [formData, setFormData] = useState(null); ... useEffect(() => { const callback = async () => { try { const fetchDa ...

javascriptreactjs

Stop the event propagation when the back button is clicked

While utilizing ons-navigator, I am looking to customize the function of a particular element at a certain stage. Employing the onClick handler has allowed me to successfully trigger this function. However, upon exiting the onClick handler, the navigator ...

javascriptonsen-ui

Adding information into material-ui dropdown using React JS

I could use some assistance with populating data into a Dropdown using material-ui in React. I am new to React and unsure about how to achieve this. I know that I can pass props to the dropdown, but it's not very clear to me. Here is my current code: ...

javascriptreactjsmaterial-ui

When I expand the accordion next to it, the accordion disappears, and it also vanishes when I close that accordion

After incorporating accordions into my site, I encountered a peculiar issue (as shown in this video): when I open one accordion, the adjacent accordion also opens unexpectedly. Similarly, closing one accordion causes its neighboring accordion to mysterious ...

javascripthtmlcssaccordion