Tips for optimizing my video to be responsive on the web

Any tips on how to create a responsive video on my website?

Here's the code snippet:

<div class="container container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-4 col-md-4 " style="background-color:dark;">
            <video width="800" height="450" controls>
                <source src="video/seatoskygondola.mp4" type="video/mp4">    
                <source src="movie.ogg" type="video/ogg">
                Your browser does not support the video tag.  
            </video>
        </div>
    </div>
</div>

https://i.sstatic.net/J7lvk.jpg Thank you for your help!

htmlcssvideobootstrap-4

Answer №1

To enhance the responsiveness, include the following CSS:

video {
    max-width: 100%;
    height: auto;
}

Be sure to optimize images for responsiveness as well with this CSS:

img, video {
    max-width: 100%;
    height: auto;
}

The size of the video may appear small initially, but it will adjust based on the container styling you have implemented.

Answer №2

I managed to resolve the issue on my own by making the following change:

<div class="col-sm-4 col-md-4 " style="background-color:dark;">

to

<div class="col-sm-6 col-md-6 " style="background-color:dark;">

You can take a look at the webpage here:

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 CSS to mask an image may not produce the desired results in the Chrome browser

Example: .mask1 { -webkit-mask-image: url(feather.png); mask-image: url(feather.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } <div class="mask1"> <img src="camp nou.jpg" alt="barcelona" width="600" height="400"> & ...

htmlcss

Choose all the HTML content that falls within two specific tags

Similar Question: jquery - How to select all content between two tags Let's say there is a sample HTML code as follows: <div> <span> <a>Link</a> </span> <p id="start">Foo</p> <!-- lots of random HTML ...

javascriptjqueryhtml

Guide to positioning SVG elements behind an image responsively using Tailwind CSS:

I need help figuring out how to position SVG's like in the example image found here. The goal is for the SVG's to maintain their positions even when the screen is resized. You can check out a sample link of my attempt before trying it out. I exp ...

htmlcsssvgtailwind-csscss-position

Having trouble getting the swiping feature to function on jQuery mobile

Hey there, I'm new to this so please bear with me if I'm not getting everything right with posting... I've been trying to figure out how to swipe left and right for jquery mobile by visiting a few pages. I found this page for my script - - ...

javascriptjqueryhtmlcssjquery-mobile

The client sends a request to the server to execute a Python script

I've been grappling with this question as a newbie for quite some time now.. I'm in the process of developing a web application using nodejs. Below is my app.js file to kickstart (my server-side) http = require("http"), path = require( ...

pythonhtmlnode.js

XPath: Choose the element by its content and disregard any child elements

<a href="editauthority.jsp" title="Add a new connection" class="link btn btn-primary" role="button"> <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i> Add a new connection</a> In my HTML code snippet above, there is an ...

htmlseleniumxpath

Guide to selecting a sibling element using Python with Selenium: A complete tutorial

Can we click on the sibling element before the recent find to access the link inside? from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.support import expect ...

pythonhtmlselenium-webdriverhtml-tabletr

The code snippet 'onload='setInterval("function()",1000)' is not functioning as expected

I need to continuously load the contents of an XML file into a specific HTML div every second. Here is the JavaScript code that I am using to parse the XML file: function fetchEntries() { if (window.XMLHttpRequest) req = new XMLHttpRequest(); ...

javascriptxmlajaxhtml

object stored in an array variable

I am looking to find out if there is a way to access a variable or function of an object that has been added to an array. I want to display all the objects in the array on a web page using a function that will return a string containing their content. Thi ...

javascripthtml

Is it possible to incorporate a header within a paragraph in an HTML document?

I am a beginner in HTML and I have been trying to modify certain attributes of a header within a paragraph using classes and ids. <div class="article"> <h1> I am here </h1> <p> ...

htmlcss

The sticky navigation bar allows for the overlapping of additional div elements

Here is the HTML AND SCSS(SASS) code for a NAVBAR: <div id="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#main">Main</a></li> ...

htmlcsscss-positiondisplaysticky

Playground Themed Central Menu Features

Check out the theme live preview here: I've been experimenting with different combinations of text-align: center; and margin: 0 auto; but I'm struggling to align the menu elements to the center of the page. Any assistance would be highly apprec ...

htmlcsswordpress

Achieve a sticky y-axis while scrolling horizontally with chartJS and Angular

Is there a way to keep the y-axis fixed while scrolling horizontally? Below is an example that achieves this functionality without Angular: $(document).ready(function () { function generateLabels() { var chartLabels = []; for (x = ...

javascripthtmlangularchart.jschartjs-2.6.0

JavaScript Summation Calculation

I am currently working on calculating the sum of three scores and displaying the total as "Total:". However, I am facing an issue in dynamically updating the total whenever a score value changes. Is there a way to utilize the "onchange" event to achieve th ...

javascripthtml

What is the best way to save information using local storage in AngularJS?

I have been struggling to implement local storage in AngularJS to store information. Can anyone offer guidance or assistance? Below is the code I have attempted: angular.module('todo', []) .controller('ToDoCtrl', ['$scope&apo ...

javascripthtmlangularjs

unable to locate the XPath for the anchor element nested within a span element

Having mastered the use of xpath, I am facing a challenge with the following link - . Can someone guide me on how to locate the xpath for the "Demo" hyperlink on this site? I attempted using //a[text()= 'Demo '] but please conside ...

htmlseleniumxpathtext

Collaborating on search suggestion functionality

In my search suggestion script, the results are dynamically updated as the user types. My goal is to make it so that when a user clicks on a suggestion, they are redirected to the following page: searchPage.php?user_query=what the user has typed in the inp ...

javascriptjqueryhtmlajaxsearch

Using ngStyle in AngularJS to dynamically adjust styling based on variable values

I am looking to create a progress bar using the uikit framework. The documentation states that it can be done like this: <div class="uk-progress"> <div class="uk-progress-bar" style="width: 40%;">40%</div> </div> However, this ...

javascriptcssangularjsuikitprogress-bar

Convert the checkbox array to comma separated values when serializing the form

I am currently working on a form that includes a dropdown menu and checkboxes: <form id="filter_form"> <select name="type"> <option value="second">second</option> </select> <input type="checkbox" name="city[ ...

javascriptjqueryhtml

Every outcome was displayed within a table format rather than as individual rows

I'm having trouble with my PHP code for search. The result is not displaying in a single table with rows, as expected. I attempted to modify the PHP by changing `'<td>','<div>' . $row['$accountcode']. '&l ...

phpcssmysqlihtml-table