Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS.

Include the following in the html header of the page.

<script type="text/javascript" src="=./javascript/playvid4css.js"></script>

For example, CSS options:

red.css
blue.css

Red video plays
Blue video plays

Possibly insert a div element in the html where the video will be displayed.

<div id="yvideo"></div>

#

YouTube embedding code.

Previous embed code:

<object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/N9ync7sLSd4?version=3&amp;hl=en_GB&amp;rel=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/N9ync7sLSd4?version=3&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

YouTube iframe code: (possible standard code for all future videos)

<iframe width="420" height="315" src="http://www.youtube.com/embed/N9ync7sLSd4?rel=0" frameborder="0" allowfullscreen></iframe>

#

Any suggestions on how to link JavaScript with CSS to display different YouTube videos, or is there a simpler approach?

javascriptcsshtmlyoutubeembed

Answer №1

Check out the array of stylesheets associated with your webpage by using document.styleSheets. This array provides an ordered list of stylesheets that can be referenced through this link:

https://developer.mozilla.org/en/DOM/stylesheet

The disabled property indicates whether a specific stylesheet is currently applied to the page or not.

You can loop through the stylesheets and check if the red or blue styles are being used (not disabled).

var i;
for (i = 0; i < document.styleSheets.length; i++)
    if (document.styleSheets[i].href == "myRedStyleSheet.css" && 
        !document.styleSheets[i].disabled) {

            // code for the red stylesheet

    } else if (document.styleSheets[i].href == "myBlueStyleSheet.css" && 
               !document.styleSheets[i].disabled) {

            // code for the blue stylesheet
    }

Answer №2

My understanding is that you are modifying the included CSS using a dropdown menu. If this is correct, then within the same event handler where you are capturing the updated value and adjusting the .CSS file, you could also replace the old iframe with a new one. This approach would simplify the process, especially if utilizing jQuery.

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

Creating a rectangular pyramid using three.js r68: a step-by-step guide

Currently working on r68, I'm in search of a modern example showcasing the creation of a rectangular pyramid that will allow me to implement THREE.MeshFaceMaterial(). Many existing examples are outdated and lead to errors with my current setup. My re ...

javascriptthree.jsgeometry

Removing files from Dropzone.js uploaded form

For my project, I am utilizing dropzone.js and faced with the task of deleting files from the plugin upload zone (rather than the server) after they have been uploaded. My goal is to revert back to displaying the "Drop files here or click to upload" text o ...

javascriptjquerydropzone.js

Perform two functions in order using jQuery within a loop

Just dipping my toes in the waters of Javascript. Please go easy on me :) I'm working with two functions that both involve making jQuery requests within for loops. Here's an example: function x(y,z) { for (var i = 0; i < y; i ++) { $.a ...

javascriptjqueryajaxasynchronous

AngularJS - Calculate multiple currencies

I need to calculate the product of a value and months. For the input value, I am utilizing a Jquery Plugin to apply a currency mask. Unfortunately, the calculations are not functioning properly with this plugin. My goal is to multiply the value, includin ...

javascriptjqueryangularjscurrency

Using PHP variables within the writeHTML() function in TCPDF

I'm attempting to include 3 different HTML strings in a PDF using TCPDF I have 3 variables that hold HTML strings. However, the code below only writes the value of $var3 to the PDF. Is there a way to display the values of all 3 variables in the PDF ...

phphtmlpdftcpdf

Using Vuetify to send a parameter from a select option to a method as a parameter

Just starting out with vuejs and encountering an issue passing parameters from a selected option to my JavaScript method. In my updateClientIsMaster method, the item is always undefined. However, when I added v-on:change="updateClientIsMaster in the & ...

javascripthtmlvue.jsvuetify.js

Change the printer orientation to landscape when using the WebBrowser Control

When trying to print an HTML file using the WebBrowser Control, I encountered an issue in which I needed to force the print to be in landscape mode. I attempted a solution involving setting the printer settings to landscape mode, but it did not work as exp ...

htmlvb.net.net-4.0printingbrowser

Prevent Buttons from Being Clicked While Another is Active in Angular

I am facing a challenge with my Angular functions that enable search features. My goal is to allow only one feature to be selected at a time. /* Trauma Search functionality */ $scope.traumaSearch = false; $scope.traumaText = "Trauma Center"; $scope.togg ...

javascriptangularjs

Executing functions in a loop using Angular

Within my component, there is a foreach loop triggered when a client is selected. Inside this loop, I need to execute a function within the same component. The issue arises with calling the function using `this.functionName()` because 'this' no ...

javascriptangularjsangularforeach

Using a comma as a decimal separator for input is not permitted when working with angular/typescript/html

I am facing an issue with my Angular frontend where I have numerous html input fields that trigger calculations upon typing. <input type="text" [(ngModel)]="myModel.myAttribute" (input)="calculate()"> The problem arise ...

htmlangulartypescriptlocalization

Trouble arises when trying to insert a script tag into a live code editor using HTML

A few days ago, I successfully created a live code editor using the ace 1.2.9 library for my website guides. Now, I'm attempting to create a basic example, but when I try to enter text in the designated text area for the guides, the studio code compil ...

javascriptace-editor

Steps for sending an image to Cloudinary using the fetch API

Struggling to figure out how to successfully upload a file to Cloudinary using fetch on my front-end. After consulting the documentation and various StackOverflow threads, I'm still facing a frustrating 400 error: export async function uploadImageToCl ...

javascripttypescriptfetch-apicloudinary

Authenticating with Objective-C

I am currently developing an iPhone app that sends a username and password to a website in order to retrieve the HTML source code of the loaded page. The login information is included in the NSString *post. When I check the _responseData instance variable ...

htmliosobjective-ccocoapost

Utilizing various filters and sorting options on API response within Angular 8

Upon receiving the following API response: [ { "imgPaths":[ "gallery/products/55ccb60cddb4d9bded02accb26827ce4" ], "_id":"5f3e961d65c6d591ba04f3d3", "productName":" ...

javascriptangulartypescript

Utilizing ID's within a jade template embedded within a P HTML element

Using the jade template, I successfully formed this paragraph. My next step is to add an ID or a class around the word stackoverflow. How can I achieve this in jade? I am aware that in regular HTML we would use something like <div class="className"> ...

javascripthtmlnode.jspug

Utilize a select box to toggle between enabling and disabling options

Could someone please help me with enabling and disabling a text field based on a select box option? I'm not sure if I have written the code correctly below. If there are any errors, please correct me. <body> <table width="500" border="1"> ...

phpjavascriptjqueryhtmldrop-down-menu

What is the correct way to execute a jQuery trigger on a checkbox or radio button to simulate a user clicking on it?

My current page utilizes can.js, making it challenging to replicate the issue on jsfiddle.net. The result I am experiencing is as follows: When I click on a checkbox (or even a radio button), an input text box should update accordingly (for example, displ ...

javascriptjquery

React filtering displaying array elements that appear single time

I've been working on this React code to filter and search items based on user input. The issue I'm facing is that when I delete the text input and try again, the filtered items disappear and don't show up unless I reload the page. I'm c ...

javascriptarraysreactjs

Top solution for live chat between server and client using jQuery, Java, and PHP on a localhost setup

Seeking recommendations for the best chat solution to facilitate communication between client PCs and a server in my private network. Specifically interested in an Ajax/Java solution similar to the chat support feature found in GMail. ...

javascriptjqueryajaxjquery-pluginslivechat

Issue with Canvas Update in Loop while Using Three.js Library

In the code snippet provided, it takes in a number of scans which is always set to 2880. The canvas is divided into 2880 sectors to cover a full 360°. The code runs a loop from 0 to 2880, rendering colored points in each sector from the center of the canv ...

javascriptreactjsd3.jscanvasthree.js