Carousel displays but video will not play

I am facing an issue with adding a video to the carousel on my webpage. The video appears but does not play, showing all control buttons like play/sound/pause/buffering. Strangely, the video only plays when in fullscreen mode and clicking the play button. Even after exiting fullscreen, it continues playing. How can I implement autoplay to ensure the video plays without needing to click fullscreen?

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
            <video width="1400" autoplay="autoplay" height="400" controls>
  <source src="movie.mp4" type="video/mp4">
     </video>

  </div>
  <div class="item">
    <img src="https://placehold.it/1200x400?text=Another Image Maybe" alt="Image">
    <div class="carousel-caption">
    </div>      
  </div>
</div>
csshtmlbootstrap-4

Answer №1

There appears to be a missing exclamation point!

<video width="1400" autoplay="autoplay" height="400" controls>

This should be correct

Answer №2

If you're looking to solve this issue, there is a handy attribute called playsinline that might help.

<video playsinline="playsinline" width="1400" autoplay="autoplay" height="400" muted="muted" loop="loop">
    <source src="movie.mp4" type="video/mp4">
</video>

Answer №3

Make sure to use autoplay instead of autoplay="autoplay"

There is a syntax error before height, as you are missing a double-quote.

<video width="1400" autoplay height="400" controls>

Check out this corrected example:

<video width="400" controls autoplay>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
    </video>

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

Using inline SVG as a background in CSS

Recently, I've been on the hunt for a way to create a blur effect on a background specifically for IE10+. After experimenting with StackBlur, I found that it did work, but unfortunately, it was quite slow due to the size of my background image. I&apos ...

javascriptcsssvgbackgroundblurry

Using CSS to apply a gradient over an img element

Looking to add a gradient overlay to an <img> tag with the src attribute set to angular-item. Here's an example: <img src={{value.angitem.image}}> I attempted to create a CSS class: .pickgradient { background: -webkit-gradient(linear ...

htmlangularjscssgradient

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

jqueryhtmlrounding

Menu options are unresponsive to clicks in the dropdown

Need help fixing my dropdown menu issue. Whenever I hover over the dropdown, it disappears before I can click on any items. Here is a snippet of the code causing the problem: #navContainer { margin: 0; padding: 0; padding-top: 17px; width: 220 ...

javascripthtmlcssdrop-down-menubootstrap-5

Understanding the behavior of Bootstrap input-groups when containing hidden sub elements

In a scenario where a button and an input field are enclosed within a div with a bootstrap class named input-group, they expand to occupy the entire width of the enclosing element. However, if the button is hidden, the input field unexpectedly contracts to ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a faster alternative to using jQuery's indexOf method?

Looking to create a search box for a large set of options (around 2000 options) The indexOf method is very slow...any alternative solutions? Jquery Code : $('#textfortitlesearch').on('keyup', function() { var query = this.value ...

jqueryhtmlindexof

Embedding SVG styling directly into the HTML document

When importing svg images with color into Mapbox Studio, they appear as black and white. The troubleshooting website mentions: If your SVG appears black after adding to Mapbox Studio, it may be due to using style properties in tags instead of inline sty ...

csssvgmapboxadobe-illustrator

How come the input bar is stuck at the top of the page?

I'm having trouble getting my input box to display in the center of the page like a sign-in form. Despite trying align-items-center, mx-auto, and other styles, it's still stuck in the top-left corner of the page. .signin { margin-top: 5px; ...

htmlcssbootstrap-5

Is there a dependable API available for capturing window screenshots using either JavaScript or PHP?

Would it be possible to capture a screenshot of window or div elements using JavaScript? I tried using "HTML5's CANVAS" but the quality of the result was not satisfactory. Is there a more reliable API available for this task? ...

javascriptphphtmlapi

Preventing scrolling within a jQuery tab using jQuery

Looking to enhance my jqueryUI tabs by incorporating a smooth scroll bar within each tab. I've experimented with various scrollable plugins such as jQuery custom content scroller, TinyScrollbar, and now areaaperta NiceScroll. However, I continue to en ...

javascriptjquerycss

Strategies for Emphasizing Individual Content Links on a Single-Page Website with Dynamic Content Replacements

My website consists of a single page with content that gets replaced using jQuery when the menu is clicked. Even though the links do not lead to different pages, just different divs, I want the menu to behave like a typical website menu with three states: ...

jquerycssnavigationhighlightcurrent-page

Looking for a simple method to apply experimental and consistent CSS across various browsers?

Is there a tool available that can automatically enhance CSS by adding experimental properties to ensure consistent appearance across different browsers? For instance, rather than manually including: .class { -moz-border-radius: 8px; -webkit-borde ...

gradientcss

jQuery failing to trigger onClick event for a specific group of buttons

Javascript: <script> $(document).ready(function(){//Implementing AJAX functionality $(".acceptorbutton").on('click', function(){ var whichClicked = this.attr('name'); ...

javascriptphpjqueryhtmlajax

Display and conceal the information with a hyperlink

I need to create a content DIV that includes a link to expand and collapse it. Within this content DIV, there is an unordered list. Initially, only two list items should be displayed with an expand link. If users want to see additional list items, they mu ...

javascriptjquerycss

Is it possible to create vertical-floating elements using CSS?

Can anyone help with a solution to my problem illustrated in the image? I am dealing with a DIV element of fixed height that contains a List. I need this List to display as columns, each list item having a fixed width. If there are too many elements in th ...

htmlcsshtml-listsfloating

Tips for transferring the ID from one element to another using JavaScript

I'm attempting to create a slideshow using icons all within one class. The "active" style class will have an ID and represent the current picture. By clicking either the left or right button, I aim to change the style of the active class. const l ...

javascripthtmlcss

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Having trouble sending input data from a form to my nodejs endpoint. When I try printing the req.body, it shows up as undefined and I can't figure out why. Here is the relevant API code snippet: var bodyParser = require('body-parser') var e ...

javascripthtmlnode.jsexpressrequest

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

There is a JSON object that I'm working with: [ { "SysID": "4", "Defect Classification": "Wrong Image Color", "1": "3.0", "2": "", "3": " ...

htmlangular

Steps to retrieve specific text or table cell data upon button click

Greetings, I am a beginner in the world of html and javascript, so please bear with me :) My challenge involves working with a table in html. Each row contains a dropdown menu (with identical options) and a button. When the button is clicked, I aim to sen ...

javascriptjqueryhtml

Issue with loading contentsCss in CKEDITOR with VUEJS2

Currently in the process of developing a website using Vue.js 2, we incorporated the ckeditor4-vue plugin some time ago. An issue has recently come up regarding the font not matching the rest of the application. The preference is to default to 'Lato& ...

javascriptcssvue.jsckeditor