Incorporate a video within the royal slider feature

Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve this? Appreciate your help!

HTML: 

    <div class="slideholder">
       <div class="deluxeSlider dsDefault">
          <div class="dsContent">
               <img class="dsImg" src="img/1.jpg"  />
          </div>
         <div class="dsContent">
               <img class="dsImg" src="img/2.jpg" />
         </div>
         <div class="dsContent">
               <img class="dsImg" src="img/3.jpg" />
         </div>
       </div>   
   </div>

CSS:

    .deluxeSlider{
         margin:0 auto;
         max-width:600px;
         width:auto;
    }

JavaScript:

   <script>
       jQuery(document).ready(function($) {
            $(".deluxeSlider").deluxeSlider({
                     transitionType:'move',
                     imageScaleMode: 'fill',
         autoScaleSlider:true,
         autoScaleSliderWidth:100+'%',
         autoScaleSliderHeight:'auto',
         autoHeight:true
             });  
        });
  </script>
javascriptjqueryhtmlcssslider

Answer №1

Below is a suggested way to include the video in the div:

<div class="slideholder">
    <div class="royalSlider rsDefault">
        <div class="rsContent">
            <img class="rsImg" src="img/1.jpg"  />
        </div>
        <div class="rsContent">
            <img class="rsImg" src="img/2.jpg" />
        </div>
        <div class="rsContent">
            <video controls>
                <source src="img/4.mp4" type="video/mp4">
                <source src="img/4.ogg" type="video/ogg">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>   
</div>

Answer №2

        <div id="full-width-slider">

            <div class="rsContent" data="royalSlider">
                <div>
                    <img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
                </div>
            </div>
        </div>


<script>
    // autoplay video on page load
    jQuery(document).ready(function ($)
    {
        $('#full-width-slider').data('royalSlider').playVideo();
    });
</script>

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

What are some ways I can safeguard my CSS from injected elements?

I have created an HTML widget that is inserted into various websites without the use of iframes. However, I am encountering issues where the CSS of some sites is affecting the appearance of my elements, such as text alignment, underlining, and spacing. Is ...

javascripthtmlcss

Using Jquery to retrieve data from PHP for validation in a datepicker widget

I am currently working on a project where I need to retrieve an array of invalid dates from a PHP file and highlight them in red on the date picker. However, the code below is not correctly populating the unavailableDates array as expected. It seems to d ...

phpjqueryjquery-ui-datepicker

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

Using html5, I am currently working with video and audio. I have encountered an issue where sometimes the video hangs even after its readyState === 4. The cause of this problem is unclear to me. I aim for a solution where if the video's readyState = ...

javascripthtmljqueryangularhtml5-video

Having trouble retrieving the selected date from the Material-Ui datepicker after the first selection

I am facing an issue with the material-ui dateandtimepicker where I am unable to retrieve the date value on the first select. The value only shows up after the second click, and it's always the previous one. Is there a way to convert the date to a for ...

javascriptreactjsdatematerial-ui

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

My code snippet in the HTML file contains Javascript: <script> $(document).ready(function(){ $("#sub").click(function(){ var user_issue = $("#issue").val(); ...

javascriptjqueryhtmlajax

What is the process for customizing the image size of a WordPress RSS feed in pixels?

Is there a way to customize image sizes beyond the 'thumbnail', 'medium', and 'large' options? I tried setting width and height in the <img> tag within an RSS file, but it didn't work. Could it be a nested quotation ...

csswordpressimagersssize

Is it possible to extract a div from a third-party domain and showcase it on my website?

Trying to integrate content from my Veetle.com channel onto my personal website has proven to be quite the challenge. Initially, I attempted to modify an iframe with CSS to display only the schedule information, but encountered limitations due to using 3rd ...

javascriptcssiframecross-domaindynamic-data

Scroll function not functioning properly in Internet Explorer

When attempting to use scroll(x,y) in Internet Explorer 10 with JavaScript, I encountered an issue when trying to run the script on a website. Is there an alternative method that works for IE? This is part of a Java Selenium test where I need to scroll wit ...

javajavascripthtmlcssselenium-webdriver

Add axios requests to the axios.all array

Good evening. I am currently trying to insert an array into the axios.all([]) structure! This is the code snippet I am working on: app2.js new Vue({ el: '#central', data: { estilo: 'resize:none;text-align:center;color: ...

javascriptvue.jsvuejs2

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

javascripthtml

Creating a color gradient for hyperlinked text when hovered over: a tutorial

How can I achieve this effect using CSS only? I want the link color to change from #00C to #000 when hovered over, with a gradient transition taking 1 second. ...

csshover

The dropdown menu in the navigation bar is getting hidden behind the content

My simple navbar is currently functioning, but it's overlapping with other content. Both the navbar and main content elements use relative and absolute positions to function. I have tried adjusting position:absolute without success. The menu keeps ...

htmljquerycssflexboxcss-grid

Adjust the fade-in effect to transition from a white hue to a custom color

Is there a way to customize the color of the fadeIn() effect from its default white to a specific color? For example, when transitioning the entire webpage fades in from grey and fades out to grey when a link is clicked. Here is my current code snippet: ...

jquery

JavaScript influences CSS in EasySlider 1.7, creating a harmonious relationship between the

Struggling to achieve a captivating overlay effect with a slider using EasySlider 1.7, incorporating both images and corresponding text. However, encountering difficulties in aligning the text correctly on the page. The black overlay visible on the main s ...

jqueryhtmlcsseasyslider

JavaScript maintain a variable that holds onto nodes even after they have been removed

Recently, I encountered a seemingly simple issue with JavaScript that has me stumped. In my code, I have a variable that stores nodes with a specific class. My goal is to remove these nodes from the DOM while still retaining them in the variable. However, ...

javascript

Using forEach in React to simultaneously set multiple properties and return destructured output within the setState function

The following is the initial code snippet: setRows((rows) => rows.map((row) => selected && row.node === selected.id ? { ...row, row.a: "", row.b: "", row.c: "" } ...

javascriptreactjstypescriptreact-typescript

How can I export an ES Object in Node.JS to an NPM package?

I am currently facing a challenge involving an ES5 object/function that I want to integrate into an NPM package. This particular object is within a namespace defined as MY_NAMESPACE.myObject = function(){...} where MY_NAMESPACE is simply an object. Typic ...

javascriptnode.jsnpm

The <main> element is not inheriting the height of its parent

Using Chrome DevTools, I removed unnecessary elements from the DOM. The body is set to relative and takes up all available space in the document, which is exactly what I want. My toolbar is also set to relative and adjusts to the height I desire: The is ...

htmlcss

Keep a consistent square proportion within a horizontal adaptable design

I am currently working on creating a responsive material list view that consists of cards with images, text details, and user actions. The challenge I'm facing is that the height of the cards can vary due to the different textual details, and the widt ...

htmlcssflexbox

What is the best way to create transitions for item entry and exit in ReactJS without relying on external libraries?

I am looking to create an animation for a toast notification that appears when a user clicks on a button, all without the use of external libraries. The animation successfully triggers when the toast enters the screen upon clicking the button. However, I e ...

javascriptreactjsreduxcss-transitions