Tips on how to utilize JavaScript for playing iframe video content that is not hosted on YouTube

Is there a way to play a video element inside an iframe? The iframe is automatically generating the video element and controls. Many suggestions mention adding &autoplay to the src, but this is not a YouTube iframe.

This is my HTML code:

<button @click="playVideo(item.name)">play</button>
<iframe :ref="item.name" autoplay :src="item.video_link" :title='item.name'></iframe>

Javascript:

playVideo(itemName) {
     
      this.$refs[itemName] <--- This gives me the iframe DOM element I want to play

    },

Rendered image:

https://i.sstatic.net/QLfro.png

javascriptvue.jsiframe

Answer №1

Having the source MP4 at your disposal means you should utilize <video> rather than an iframe. This way, you can take advantage of features like autoplay, controls, and more.

Your code should resemble something along these lines:

<video :ref="item.name" autoplay :title='item.name'>
  <source :src="item.video_link" type="video/mp4">
</video>

Additionally, since IPFS may have slower loading times initially, you can also include a poster attribute to display a thumbnail while the content loads. Here's a sample using an IPFS source:

<h3>IPFS Embedded Video Demo</h3>
          <!-- 👇 required for autoplay in Chrome --> 
<video autoplay muted autopictureinpicture controls poster="https://i.sstatic.net/O9qG3.jpg?s=256&g=1" height="200">
  <source src="https://ipfs.io/ipfs/QmbGtJg23skhvFmu9mJiePVByhfzu5rwo74MEkVDYAmF5T" type="video/webm">
</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

When the "disabled" property is enabled, the <Select> element prevents the scrollbar from appearing

I've encountered an issue where disabling a "select" element also disables the scrollbar in Internet Explorer, while it functions perfectly in Chrome and Firefox. Is there a workaround for this problem? <select size="5" style="height:100px" disa ...

javascripthtmlcssinternet-explorer

Using static assets within VueJS Components

I am currently working on a VueJS project that was customized from a base "webpack-simple" template provided by vue-cli, and it follows the folder structure below: https://i.sstatic.net/C3vxY.png My main focus right now is developing the "clickableimage. ...

javascriptweb-applicationswebpackvue.js

"Error: Unable to push new Grade to grades array" encountered while attempting to add a Grade to an existing array

Hi there! I'm working on a webapp that allows me to track my grades and calculate the average, but I'm having trouble adding grades to my Array using a button. Whenever I click on the Add Button, an error message pops up: TypeError: this.grades. ...

javascriptarraysvue.jsvue-component

Prevent the router link from being enabled until the submit button has been clicked

On page one, there is a submit button that, when clicked, should enable a router link to navigate to page two. If the button is not clicked, the router link should remain disabled. I attempted to disable the event, but it did not work. Page Two There is ...

javascriptvue.js

Creating a canvas element within an iframe: A step-by-step guide

I have a unique situation where I have an iframe containing a DIV element named "pageContainer1". My goal is to insert a canvas element into that specific DIV and then be able to access it in order to draw something on it. Despite my attempts so far, this ...

javascriptjqueryiframehtml5-canvas

When transitioning between steps in Material UI React, the Vertical Stepper component should automatically scroll to the top of

When switching steps in Material UI's vertical stepper, it should automatically scroll to the beginning of the selected step. https://i.sstatic.net/fRX4E.png One potential solution is to utilize a ref to scroll to the stepper titles. More informatio ...

javascriptreactjsmaterial-ui

Grunt: Executing tasks exclusively for updated files - the ultimate guide!

In my Gruntfile.js, I have the configuration set up as follows: module.exports = function(grunt) { require('jit-grunt')(grunt); grunt.initConfig({ uglify: { options: { manage: false }, my_target: { file ...

javascriptnode.jsgruntjs

React app experiencing crashes due to Material UI Select component issues

I am facing a challenge while trying to incorporate a material ui select component into the React application I am currently developing. Whenever I attempt to add a select functionality to a form, it results in a crash. Despite following the example provid ...

javascriptreactjsmaterial-ui

Nested promise not being waited for

As someone new to all things asynchronous, I am currently facing a challenge. I want to ensure that a file exists before updating it, creating the file if necessary. However, I am struggling to figure out how to achieve this. I am aware of the option to u ...

javascriptnode.jsasynchronousasync-awaitfs

Tips for transferring a value from a JavaScript variable to an AngularJS variable

I am facing an issue with passing a value from a JavaScript variable to an AngularJS variable. I need to send the value stored in the dataArray variable in JavaScript to the AngularJS variable $scope.test Here is the HTML code snippet: <!DOCTYPE html& ...

javascriptangularjs

What is the reasoning behind AngularJS 2 HTTP Post only allowing string data as input?

Can someone explain to me why the HTTP Post method in AngularJS 2 (2.0.0-beta.13) only accepts string data as body, unlike in AngularJS 1 where it can accept a JavaScript object? AngularJS-1: $http.post(someUrl,someObject) AngularJS-2: http.post(someUr ...

javascriptangularjsangularhttp-post

Selenium is having trouble finding the iframe element

I'm struggling to locate the input element within an iframe using Selenium. Even after trying switchTo().frame(id) and switchTo().frame(index), I am still unable to find it. This is the code snippet I have been using: driver.switchTo().defaultConten ...

javaseleniumiframe

Prevent page scrolling when an AngularJS dropdown is active

When using the angularjs dropdown, I encounter an issue where scrolling to the end of each side of the content triggers scrolling of the body, which can be quite bothersome. Is there a way to prevent the body document from scrolling when the dropdown is di ...

javascripthtmlcssangularjsdropdown

Javascript promises executing in a mixed-up sequence

Utilizing Javascript's native Promise, I created a modified version of fs.readFile called readFileAsync. This function reads and parses a JSON file, returning the object when resolving. function readFileAsync(file, options) { return new Promise(fun ...

javascriptnode.jspromisechaining

The get method is functional, however, the post method is not working as expected in Zap

I'm currently using zapworks studio to create an AR experience. This involves using Z.ajax for ajax calls, including GET and POST requests. For hosting couchdb, I've opted for smileupps due to their free hosting service. The CORS configuration is ...

javascriptandroidajaxcorscouchdb

Creating HTML dynamically upon page load with the use of JavaScript

I have a project where I need to create a small block of JavaScript that can be embedded in various websites' home pages. This script will automatically call a URL when visitors hit the home page, collecting specific statistics and returning a small i ...

javascripthtml

Dynamic AngularJS Content Loader

I am attempting to utilize angularJS in order to dynamically load content from my HTML using ajax calls. My goal is to create a single method that can handle different parameters to specify the ajax/REST uri and display the results in various components. B ...

javascriptangularjsajax

The Google Maps directions stay visible even when new routes are generated

Utilizing the Google Maps Javascript API V3 in my Android WebView has presented a new issue. When I request directions from point A to B, it displays correctly. However, when I switch the endpoints to go from A to C, the route from A to B does not disappea ...

javascriptandroidgoogle-mapsgoogle-maps-api-3

Is it possible to achieve consistent scrollY height values across various screen sizes?

Looking to apply a class when a certain screen height is reached? Here's my approach: window.onscroll = function() {scrollPost()}; function scrollPost () { var x = window.screen.width; var i = window.scrollY; var a = i / x; animator ...

javascript

Access the JSON data stored in the File Directory by reading and utilizing it for your project

Can someone help me figure out how to retrieve data from the xmltojson.json file and assign it to a variable using JavaScript? const jsonfile = require('jsonfile') const file = 'xmltojson.json' jsonfile.readFile(file, function (err, obj ...

javascriptjsonfileparsing