Ways to switch the visibility of a specific thumbnail

Our team has created a new app that showcases all the videos in our channel. Users can browse through thumbnails and click on one to view the related video, instead of viewing all videos at once.

Angular Code 

 $scope.isvideoPlaying = false;
$scope.displayvideo = function(){
   $scope.isvideoPlaying = true;
}

HTML Code

<div class="list card" ng-repeat="video in videos | filter:searchBox" >
          <div class="item item-text-wrap">
            <h2>{{video.snippet.title}}</h2>
            <p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p>
          </div>
          <div class="item item-image">
            <img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying" ng-click="displayvideo()"> 
            <!-- Use 'youtube-video' as an element or attribute. -->
            <div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying">
              <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
            </div>
          </div>
        </div>
javascriptjavaandroidangularjsionic-framework

Answer №1

Perform the following action, assuming that 'video.id.videoId' represents your video object ID:


$scope.isvideoPlaying = {}
$scope.displayvideo = function(id){
  $scope.isvideoPlaying[id] = true;
}

As for the HTML code,

<div class="list card" ng-repeat="video in videos | filter:searchBox" >
      <div class="item item-text-wrap">
        <h2>{{video.snippet.title}}</h2>
        <p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p>
      </div>
      <div class="item item-image">
        <img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying[video.id.videoId]" ng-click="displayvideo(video.id.videoId)"> 
        <!-- Use 'youtube-video' as an element or attribute. -->
        <div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying[video.id.videoId]">
          <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
        </div>
      </div>
    </div>

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

Calling functions in AngularJS/HTML can help you execute specific

Just started with angularjs and facing some major issues haha... I have something that seems to be working fine, but I can't figure out what's wrong with this code... can someone please help me? Here it is: Basically, the scope.create function ...

javascripthtmlangularjs

Attempting to extract the desired aggregations from a two-dimensional JSON array

Looking to parse through this JSON 2D array (snapshot data example below) to calculate the total cases and deaths for each date, disregarding the state column. While achievable in SQL, it poses a challenge in JavaScript. Ultimately, the summarized data wi ...

javascriptjsonparsingmultidimensional-arrayaggregation

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

javascripthtmlcssreactjs

Tips for sending variable from JavaScript to PHP Page through XMLHTTP

Make sure to review the description before flagging it as a duplicate. In my understanding, the method of transmitting data from JavaScript to PHP is through Ajax Call. This is the situation I am facing: With PHP, I bring forth an HTML page that cont ...

javascriptphpjqueryhtmlajax

Converting a customer ShaderMaterial to Lambert Material using Three.js

Currently, I am utilizing a cell shading script to shade a Lambert material on a model. However, I am facing challenges when trying to apply the same script to a custom Shader Material. Is there a way to convert the custom material into a Lambert materia ...

javascriptthree.js

Unlocking supplemental JSON data in a Dynatable AJAX query

I have implemented the dynatable.com plugin to generate a table of schools from our database. The table is dynamic and can be filtered, so it does not always display the total number of schools. While we do not include a 'number of pupils' column ...

javascriptjqueryjsonajaxdynatable

Utilize AngularJS to bind to the input field's "enter" key and automatically submit the form if the input

I have been tasked with creating a directive that allows users to navigate to the next input or button in a modal window: .directive('autoVrm', function () { return function (scope, element, attrs) { var counter = 0; ...

javascriptangularjs

What is the process for executing cucumber tests using a batch file?

I am looking to execute my Cucumber Features using a custom batch file, but I need guidance on how to achieve this. The batch file should provide the capability to run specific test cases based on Tags or feature files of my choice. ...

javaseleniumbatch-filecucumberbrowser-automation

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

Currently, I am iterating through [postArray] to retrieve various posts, each of which has its own unique "_id". My goal is to utilize this "_id" to add likes to the corresponding post. This is the v-for loop I am using: <div class="posts" v- ...

javascriptvue.jsvue-cli

Differences between controllerAs and $scope: exploring, experimenting, and optimizing

I'm currently working on a large angular application and we are in the planning and testing phase. One aspect we are uncertain about is whether to use controllerAs or classic $scope when writing controllers. We plan to use a Service Model Locator so e ...

angularjsangularjs-controller

The point in the vector data is incorrectly positioned on the map in OpenLayers

I am looking to display a world map using the default OpenLayers WMS, along with a single point on it that will have interactive events like onhover. Below is my code snippet: var options = { projection: ...

javascriptvectoropenlayerspoint

A novel way to enhance a class: a decorator that incorporates the “identify” class method, enabling the retrieval

I have been given the task to implement a class decorator that adds an "identify" class method. This method should return the class name along with the information passed in the decorator. Let me provide you with an example: typescript @identity(' ...

javascripttypescript

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

Is it possible to run concurrent PostgreSQL queries in NodeJS?

I'm unsure why, but the task is supposed to be run in parallel and should only take 2 seconds: const test = async () => { client.query("SELECT pg_sleep(2) FROM test", (err, result) => { console.log("DONE!"); }) client.query("SELECT pg ...

javascriptnode.jspostgresql

When trying to find a substring within a string in JavaScript, the "else if" statement may not be triggered

I'm currently working on creating a Hangman game using HTML and JS. Most of the code is functioning properly, but I've hit a roadblock. For some reason, one part of my if else statement isn't working correctly. Here's the line of code: ...

javascripthtml

You cannot add properties to an object within an async function

I am attempting to include a fileUrl property in the order object within an async function, but I am unable to make it work properly. My expectation is for the order object to contain a fileUrl property once added, but unfortunately, it does not seem to b ...

javascriptarraysexpressasynchronouspromise

Unable to simulate the Enter key press event for a text area using Angular 7

I've implemented a feature that allows users to type something and then press the submit button, at which point the cursor should move to the next line. If the user types some words and presses the Enter key, the cursor should also shift to the next l ...

javascriptangularangular7

Tips on how to loop through every piece of information within a table

<table class="table_style" id="table"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> ...

javascriptjquery

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Is there a way to use JavaScript to obscure all elements on a page except for one specific HTML element? This web application is optimized for Chrome, so CSS3 can also be utilized. ...

javascriptcss

What is the mechanism through which a nested function within an event handler obtains the event object?

How is the e object available to the nested function inside handleClick2 when only the input object is passed? Is this related to the concept of Lexical Environment? handleClick2 = (input) => (e) => { this.setState({ [input]: e.target.va ...

javascriptreactjs