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

How can the required flag be integrated with rules validation in react-hook-form and material-ui (mui) for inputs?

Currently, I have implemented react-hook-forms for handling form functionality and validation in our application. On the other hand, we are utilizing MUI/Material-UI as our component library. One issue that arises is that MUI automatically adds a * to inpu ...

javascriptreactjsvalidationmaterial-uireact-hook-form

Using query strings to manipulate the URL of an iframe and add additional information

I am facing a challenge with integrating my legacy perl application into an MVC application. I have set up a structure where the legacy application is loaded into an iframe within default.aspx, but I need to capture the URL of each page within the iframe a ...

javascripthtmlasp.net-mvcperliframe

What is the process to set up a WebSocket on Tornado for a production server rather than on a local machine?

Recently, I've delved into the world of WebSockets but have only experimented with them in a localhost environment while developing locally. Following this informative tutorial on real-time data visualization: https://medium.com/@benjaminmbrown/real-t ...

javascriptpythonwebsockettornado

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Utilizing ion-slide-box within an ion-content container that allows for scrolling

I've created an Ionic view with the following structure: <ion-content scroll="true"> <ion-list> ... some ion items... <ion-item> <ion-slide-box> <ion-slide ng-repeat="image i ...

javascriptangularjsslideshowionic-framework

Transitioning from using a jQuery get request to utilizing Vue.js

Looking to transition from JQuery-based js to Vue as a newcomer to JavaScript. Seeking guidance on making a get request and displaying the retrieved data. What approach would you recommend for this task? Here's the HTML snippet: <div> <di ...

javascriptjqueryvue.js

What is the best way to implement JavaScript code that can modify the layout of a website across all its pages?

I am facing an issue on my website where, on the index page, clicking a button changes the background color to black. However, this change is not reflected on other pages even though I have linked the JavaScript file to all HTML documents. How can I make i ...

javascripthtmlcss

Newbie Query: How can I apply various font weights to a single font within the same stylesheet?

Twice I have inserted the font Acumin Pro Condensed, once with a weight of 400 and again with a weight of 700. I attempted to use both weights separately; assigning the 400 weight to an h3 tag and the 700 weight to an h2 tag. However, only the 700 font we ...

cssfontsfont-face

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

Troubleshooting JSON Array Index Problems

I'm having trouble reaching index 3 in the array using the javascript options on my webpage. The final question "are you satisfied with your choice?" is not showing up for me. I'm not sure what I might be missing or doing incorrectly in this sit ...

javascriptarraysjson

Having trouble with your Bootstrap Accordion panels?

I am in the process of creating a unique accordion-style panel for a client's website. However, I am facing difficulties as this is my first attempt at setting up such panels and it doesn't seem to be functioning correctly. I'm not sure if I ...

htmltwitter-bootstrap

The page fails to load when redirected, however, it briefly displays the page upon clicking the back button before navigating back to the previous page

Currently, I am working with Angular 2 and encountering an issue when attempting to click on a link. The loading bar continues to progress without displaying the data or HTML content on the page. Furthermore, if I try to go back to the previous page, the i ...

htmlangular

When a barcode scanner is used, it will trigger a "keypress" event only if the user is currently focused on an input box. Is there a specific event to monitor when the user is not on an input

Scenario: In the development of my web application, I am utilizing a barcode scanner device that allows users to scan barcodes for navigation to specific pages. Challenge: The current barcode scanning device is set up to only trigger "keypress" events w ...

javascriptjqueryweb-applicationsbarcodedom-events

Encountering a problem while creating a Page Object in webdriver.io - getting the error "setValue is not a function" or "cannot read property 'setValue' of undefined"

While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is LoginPage.username.setValue is n ...

javascriptseleniummocha.jswebdriver-iowebautomation

Choose the div without a class

I currently have several divs displayed on my website. <div class="slide bx-clone"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide bx-clone"></div> <div class="slide bx-clone" ...

javascriptjqueryhtml

What is the procedure for attaching console.log to "l" in vue.js?

The code in main.js includes the following: window.l = function () { } try { window.l = console.log.bind(console) } catch (e) { } It functions properly in non-Vue applications. However, when trying to use it in a Vue action/method like this: l("test") ...

javascriptvue.js

The jQuery OnClick function fails to work in Internet Explorer when a user tries to execute a "ctrl+click"

One of my jQuery functions triggers an ajax POST when a link (href) with a specific id is clicked. It works perfectly fine in Chrome - I can simply click the link or use "Ctrl" + "Click" to open it in a new tab, and the ajax POST executes as intended. Howe ...

jqueryajaxinternet-exploreronclick

Performing a GET call within the configuration settings of AngularJS

I found a similar question here but unfortunately it didn't solve my issue. I am currently using Angular-UI's Google Maps API, which requires configuration as follows: .config(function(uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider ...

javascriptangularjs

An issue with displaying images has been identified within Next.js, resulting in an error message related to the hostname

Encountering an error when using next js Image next.config.js: module.exports = { images: { domains: ['localhost'], }, }; Error image: https://i.stack.imgur.com/RvsdH.png I am struggling to understand how to correctly set up the image ...

javascriptreactjsnext.js

Generate options for a dropdown menu based on the choice made in another dropdown menu utilizing ajax technology

Greetings, I am currently working on a JSP page that features a form with two drop-down lists. The first drop-down is designed to display the country names. While the second drop-down should show the states corresponding to the selected country. I have ...

jqueryajaxjsonjsp