A sleek CSS text link for a stylish video carousel

I am attempting to create a CSS-only text link to video slider within our Umbraco CMS.

Due to the limitations of TinyMCE WYSIWYG, I am restricted in the amount of code I can use as it will strip out most of it.

So far, I have developed a basic CSS slider and experimented with various click actions. The only method that seems to be effective is using a standard HREF. For example:



<!-- YouTube video - multiple 'item*' elements -->

       <div class="item slide-in" id="item0"><br /> <br />          <iframe src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" <br />              allowfullscreen="" width="410" height="231" frameborder="0"></iframe><br />         
       </div>

<!-- End YouTube video -->

<!-- Link to open the video using 'item*' ID -->

        <a href="#item1" class="btn btn-large btn-primary">Cat link one</a><br />        <br> <br><br />        <a href="#item2" class="btn btn-large btn-primary">Cat link two</a>

<!-- end video link 'item*' -->

The issue here is that it behaves solely as a page anchor, which is quite frustrating for me.

I am limited to making changes within the CMS interface and can only insert JS in either the header or footer of the document.

Check out the jsfiddle example

I can only add an onClick event to an <a href... onclick=...>, but this still results in creating an on-page anchor...

Your input would be greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

You can change an <iframe>'s src using just an <a> tag without the need for JavaScript. Follow these steps:

  1. Give a name attribute to the <iframe>
  2. Set the target attribute of the <a> tag to the value of the name attribute in the <iframe>
  3. Add a href to the <a> tag with the URL of any valid YouTube video

If you want the video to play automatically when the button is clicked, add autoplay=1 to the end of the video URL.

You can style the link to look like a button if you prefer that over regular anchor tags.

The videos may not work in the snippet example above. For a live demonstration, visit this PLUNKER

Demo

a {
  text-decoration: none;
  font-size:20px;
}
<button><a href="https://www.youtube.com/embed/RUlbTCjnX6E?ecver=1" target='yt'>1 Minute</a></button>
<button><a href="https://www.youtube.com/embed/1Wh8RzcQZr4?ecver=1" target='yt'>Cat Fails</a></button><br/>

<iframe name='yt' src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen width="410" height="231" frameborder="0"></iframe>

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

The method's title does not correspond to a function

I am having difficulty calling the method within my module. An error occurred: TypeError: usr.User.getAddress is not a function I am unsure of how to resolve this issue, as I suspect there may be a problem in my module code. My goal is to retrieve the ad ...

javascriptnode.jsmodule

Guide to incorporating a scroll-follow effect in multiple directions

I am facing a challenge with managing an array of divs that exceed the dimensions of their container. I have set overflow to hidden on the container and used JQuery Overscroll to achieve an iPhone-like scrolling effect on the map. The problem I'm try ...

javascriptjqueryhtmlscrollrotation

Recent Google algorithm changes impact websites built on AngularJS and JavaScript

Exciting news from Google today (May 28, 2014) - JavaScript content will now be rendered by the Googlebot itself! This means there's no need to worry about serving pre-rendered pages just for crawling purposes. You can find out more details on this an ...

javascriptajaxangularjsseo

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

javascripthtmlnode.jscssyahoo

The flex reverse-column child's text selection occurred in the incorrect direction

I am having an issue with selecting text in a flex container that is set to reverse column. The selection I make is incorrect because the browser tries to select from the end of the element, resulting in improper selection. For example, <div style=" ...

cssbrowserflexboxselectiontextselection

Maximizing the potential of $urlRouterProvider.otherwise in angular js

I am encountering an issue with redirecting to the login screen when there is no UABGlobalAdminId in my storage. I have tried using $urlRouterProvider.otherwise but it doesn't seem to be functioning properly. When I attempt to debug, the console does ...

javascriptangularjsangularjs-routing

How to set a custom background image for the Django admin panel

I am struggling to display a background image in the Django admin site. Despite researching multiple solutions, none of them seem to work for me. All I want is for the background to be visible behind the admin site. I have a file named base_site.html. {% ...

cssdjangoadmin

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

javascriptphphtmlwordpress

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

Performing a search in Django using raw MySQL commands

I am currently in the process of developing a custom search engine that includes 4 search fields, aiming to search within a MySQL table. This snippet from my views.py covers the search functionality, pagination, and listing of the entire table data. def ...

pythonhtmlmysqldjango

What could be causing the error when attempting to release this Node-MySQL pool?

My first attempt at utilizing connection pooling is with Node.js. I crafted a database connection module in Node.js to establish a single connection, which is then referenced within a pooling function for later use when passed to different modules. /* D ...

javascriptmysqlnode.js

Creating unique CSS div designs based on the nth-child selector

I have created a website layout. https://i.stack.imgur.com/6FSEb.png I have included the file showing the design. The data in the boxes will come from a MySQL database. My query is, can it be done with just one query? Currently, I am running separate q ...

htmlcss

Is it feasible to create a doughnut chart with curved edges?

My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. I want each segment to have fully rounded corners, which presents a unique challenge. ...

javascriptcsssvgchartshtml5-canvas

Is there a way to eliminate empty arrays from my data?

I'm dealing with this PHP code snippet. public function display_children($parent,$level){ try { $cmd = $this->connection->prepare('SELECT mem,pid from mytree where pid = ?'); $cmd->execute(array($parent)); ...

javascriptphpjson

Transforming React drag and drop page builder state into a functional html, css, and js layout

Currently, I am in the process of developing a drag and drop UI builder for react-based app frameworks. Before incorporating drag and drop functionality, my main focus is on rendering a page layout based on a structured array stored in the state. I have a ...

javascripthtmlreactjsdrag-and-droprender

What could be the reason for the unexpected behavior of position sticky?

I am encountering an issue while trying to figure out why the container__item--special element behaves as a sticky element in this code snippet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> ...

htmlcsscss-position

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

jquerycss

Swap out all hyperlinks on the webpage with a different URL

I am looking to update all links in a specific style with new ones. I want to streamline the download process for Google Drive links. https://drive.google.com/file/d/1cCIWJMBOX-NvzYVTQajaVo5lNknYA2E8/view?usp=sharing My plan is to extract '1cCIWJMBO ...

javascripthtmlregex

While v-carousel adjusts to different screen sizes, the images it displays do not adapt to

Whenever I implement v-carousel, everything seems to be working well, but there is an issue on mobile. Despite the carousel itself being responsive, the images inside do not resize properly, resulting in only the center portion of each image being displaye ...

javascriptcssvue.jsvuetify.js

Can parameters be passed in an ajax request with a dynamic parameter name in asp.net?

Can someone help me with an issue I am facing with ajax requests? I have a post ajax request in asp.net where I pass parameters. When I change the parameter name in the code behind (aspx.cs), the request fails to post. However, when I tried the same with M ...

c#jqueryasp.netajax