How should we incorporate a video on our website - through an iframe, vimeo, or hosting it

I am exploring the world of embedding videos on websites for the first time. I initially uploaded my video to Vimeo to use as a host, but there are some aspects of their hosting that I don't like, such as the buttons and recommended content at the end of the video. However, I do admire how seamlessly their code positions the video on the page in full width.

Below is the code I borrowed from Vimeo's developer page, which has been working well. I have a question, though - can someone help me modify this code to work with a self-hosted video instead?

 <li>
            <iframe src="http://player.vimeo.com/video/114867351?api=1;title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>

In your response, could you also share whether it is better to host your own video or rely on a platform like Vimeo for hosting, as I'm unsure of the best approach.

This livelink will be removed once the question is resolved, but here is a livelink to the page with the embedded video.

htmlcssiframevideovimeo

Answer №1

Embedding videos in HTML5 is a convenient feature.

<video controls autoplay style="customize your css styles as needed here.">
  <source src="yourvideo.mp4" type="video/ogg">
  Your browser may not support HTML5.
</video>

This method works well, but older browsers might not be compatible.

Consider the impact on bandwidth and server load before implementing this approach. It's advisable to host externally unless you have sufficient resources.

Using platforms like Vimeo can simplify the process of ensuring video compatibility across various devices.

The best method depends on your goals, server capabilities, and user preferences - there's no one-size-fits-all solution.

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

Is there a way for me to keep the right-to-left text flowing into the section below it

I have come across a particularly lengthy Right-to-left arabic paragraph: https://fiddle.jshell.net/09b6xoaa/4/ My expectation is that when the line becomes too long, it should continue on the left side below ("end of the line this should be on the secon ...

htmlcssarabicright-to-left

Trouble with displaying object values in a dropdown menu

I am receiving data from an array of objects, each with 3 properties: https://i.sstatic.net/Fv0qB.png This script is stored in a scope variable for use on the view. angular.forEach(result.updatedItems, function (attr) { $scop ...

angularjshtml

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

unable to retrieve data from checkbox selections

I'm working on a Cold Fusion form that includes a series of checkboxes. When I submit this form to the page frag5.cfm, there seems to be an issue with retrieving the values. The line of code in frag5.cfm is as follows: <cfoutput>values are #fo ...

htmlformscoldfusion

Enhancing User Experience with Animated jQuery Progress Bar

I came across a cool tutorial on animating progress bars: The only issue was that the progress bar didn't utilize jquery, and there wasn't information on linking multiple buttons to it. After some searching, I found another tutorial that address ...

javascriptjquerycss

Tracking Clicks on Folders in jQuery File Tree

I am attempting to integrate a jQuery file tree into my website using the example provided below: Check out this jQuery file tree example While I can successfully trigger an event when a file is clicked, as demonstrated in the example, I am struggling to ...

javascriptjqueryhtml

Show the tooltip above the cursor if there is enough space in the viewport; otherwise, position it

I'm encountering an issue with positioning a tooltip that I'm creating. The tooltip's CSS is set to position: absolute, and I've implemented a mouse event handler that adjusts its top and left based on the pageX and pageY. While I cou ...

javascriptjquerycss

Having trouble using jQuery's .off() method to remove an event handler?

I'm facing an issue with my jQuery code where the .off('click') method doesn't seem to be working. I've tried removing the event binding from '.reveal-menu', but it's not working as expected. The initial animation wo ...

javascriptjqueryhtmlcss

JQuery failing to handle/parse/interact with dynamically generated content

My challenge lies in selecting and processing dynamically generated questions with a group of radio buttons. While I have no difficulty with static content, I have attempted to delegate events using the on() method without success. I am contemplating utili ...

javascriptjqueryhtml

Send user to a designated webpage and execute JavaScript code upon the loading of said page

When redirecting from one page to another, there was an issue with executing some code. if (something === true) { /* Redirect to anotherpage.php */ window.location.href = "anotherpage.php" var test = "anotherpage.php"; /* On load of anoth ...

javascripthtmljqueryjquery-events

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

htmlcssreactjsstyled-components

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

I'm facing an issue with server-side validation messages on my form, which includes fields for Name, Mobile, Email, and Message. While JQuery validation works fine, clearing the error message after user input is causing a problem. Using AJAX to submi ...

phpjqueryjsonajaxhtml

Alter the size of an element's width dynamically while maintaining a predetermined width

Having a fixed width div: // CSS @media only screen .column.small-centered:last-child, .columns.small-centered:last-child { float: none; } .lesson_lt_mc_div .small-centered { margin-top: 15px; margin-bottom: 15px; width: 296px; } foundation.css:1 ...

javascriptjqueryhtmlcss

Converting HTML to PDF using JavaScript

My goal is to create an HTML page and then print and download it locally as a PDF. However, when I try to generate the PDF, it cuts off the last 3 to 4 lines of the page. I want to create multiple PDF pages in A4 size with the same styling as the HTML pa ...

javascripthtmljquerycss

Unable to access a frame inside an iframe and frameset using JavaScript when both domains are identical

I am attempting to use JavaScript to access an HTML element within a nested frame in an iframe and frameset. The structure of the HTML is as follows: <iframe id="central_iframe" name="central_iframe" (...)> <frameset cols="185, *" border="0" ...

javascripthtmldom

Guide on converting a date input to a timestamp

I am trying to convert the date retrieved from an HTML5 date input into a timestamp and store it as a variable. HTML: <form> <section class="input"> <input type="date" id="date" name="maintenanace_date"/> </section> <sectio ...

javascripthtml

Utilize PHP to read a text file and merge identical entries to declutter the

I am testing a code snippet that redirects users to a different page if their IP address does not match the predefined one. If it doesn't match, I also want to save their IP in a text file. $file = fopen("ips.txt", "w"); if ($ip == "iphere") { e ...

phphtmlarraysfopenfwrite

Ensure that the elements within the container automatically adjust their height to fill the entirety of the

I am facing a challenge in getting the items within a container to occupy the space in the desired way. The main issue lies in the fact that flexbox and CSS grid are designed to adjust to changes in width rather than height, whereas I require the opposite ...

javascripthtmlcssflexboxcss-grid

The height on iPad Chrome is displaying incorrectly

iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177 I tried running a simple html file on my iPad and encountered an issue. Despite setting the height to 100vh, a vertical scrollbar appeared on the right side of the screen allowing ...

htmlcssiosgoogle-chromeipad

The hamburger icon refuses to close even after being clicked once

Navigation Bar Component import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { logout } from '../../redux/actions/auth'; import './Navigati ...

javascripthtmlcssreactjs