Instead of automatically playing, Youtube videos either remain idle or display suggested videos

I am trying to play a specific moment of an embedded Youtube video using some javascript code. At the specified time, I execute the following code:

document.getElementById("video").src= "https://www.youtube.com/embed/...?autoplay=1&start=212";

where "video" is my iframe element. The issue arises when testing this in different browsers - Internet Explorer plays the video correctly at the designated time, while Chrome shows suggested videos instead of playing the video. On mobile browsers like Samsung and Ghostery, the video simply appears without playing. What could be causing this inconsistent behavior? Could it be related to my gmail or youtube accounts settings, or perhaps browser configurations?

javascriptvideobrowsercross-browserembedded-video

Answer №1

In order to provide a clearer explanation of the issue, please include your code and any relevant screenshots. Additionally, I recommend exploring the Youtube iFrame Player API for the desired functionality. This solution should work across different browsers like Chrome, IE, and Firefox. It's advisable to also consider mobile compatibility.

<!DOCTYPE html>
  <html>
    <body>
      <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
      <div id="player"></div>

      <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        // after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            playerVars: {
              'autoplay': 1,
              'start': 212
            },
            events: {
              'onReady': onPlayerReady
            }
          });
        }

        // 4. This function is called by the API when the player is ready.
        function onPlayerReady(event) {
          event.target.playVideo();
        }
      </script>
    </body>
  </html>

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 to display HTML content as a string using JavaScript?

Below is the javascript code I am currently using: var html = '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; curso ...

javascripthtmldjango

How to access a webpage on your Android device without the address bar visible

My question relates to sending Push Notifications through OneSignal. Upon clicking a push notification, it automatically redirects the user to my website. Is there a way to hide the address bar on the browser when this happens? I attempted using the follo ...

javascriptandroidjqueryhtmlweb

When using Vue.js router.push, the URL gets updated but the RankerDetail component does not refresh when navigating with a button

I am currently working on a Vue.js project that involves vue-router, and I've encountered an issue with the RankerDetail component. This particular component is responsible for dynamically displaying data based on the route parameter id. Strangely, wh ...

javascriptvue.jsvue-router

Unable to send image file and string via XHR is causing issues

This task may seem straightforward, but I've been struggling with it for hours. My goal is to upload an image file along with stringified coordinates to crop the image on the server-side. Below is my client-side code: var formdata = new FormD ...

javascriptexpressxmlhttprequest

My attempts to set a cookie on Internet Explorer and Chrome are being met with resistance

On my website, I set a cookie like this: context.Response.Cookies.Add(new HttpCookie("MYCOOKIE", MyStringVar) { HttpOnly = false, Expires = DateTime.Now.Add(GlobalSettings.AuthCookieDuration) }); During development, everything works fine in all bro ...

.netasp.netcookiescross-browser

Error in Passport JS: Trying to use an undefined function

I've been struggling with debugging my code in Express and Passport. I've tried following solutions from others but can't seem to get it right. Any help or useful links would be greatly appreciated. Here is the error message along with the ...

javascriptmongodbexpresspassport.js

Authentication not being triggered by Adal.js

I have been attempting to incorporate adal.js into my application. Here is the code I am using. Can someone please help me understand why the authentication process is not being triggered? var app = angular.module('TestWebApp', [ 'ngRout ...

javascriptangularjsazureazure-active-directoryadal

Is it a problem with Cucumber Js callbacks or a feature issue?

I would like to create a scenario similar to this: Scenario: initialize new Singleton When an unmatched identity is received for the first time Then create a new tin record And establish a new bronze record And generate a new gold record This s ...

javascriptcallbackcucumbercucumberjs

URL Construction with RxJS

How can I efficiently create a urlStream using RxJS that incorporates multiple parameters? var searchStream = new Rx.ReplaySubject(1); var pageStream = new Rx.ReplaySubject(1); var urlStream = new Rx.Observable.create((observer) => { //Looking to ge ...

javascriptsystem.reactiveecmascript-6rxjs

Spacing Problem with Title Tooltips

After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...

javascripthtmlangulartypescript

Tips for steering clear of global variables while coding in JavaScript

What is the best way to avoid using global variables in JavaScript? //load more var totalItems = $("#myList li").size(); var startIndex = 3; $('#myList li:lt(' + startIndex + ')').show(); $('.loadmore').on('cli ...

javascriptvariablesglobal

Troubleshooting issue with React mapping an array of items in a modal window

My state implementation is working perfectly fine, except for a minor issue with the modal window. Within the state, I have utilized objects that are normally displayed (you can refer to the screenshot here). Please pay attention to the "Open modal" butt ...

javascriptarraysreactjsreduxmodal-window

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

What is the best way to instruct firebase-admin to halt during test execution?

Running process.exit() or --exit in my mocha tests doesn't feel right. I'm currently working on code that utilizes firebase-admin and while attempting to run mocha tests, wtfnode showed me: wtfnode node_modules/.bin/_mocha --compilers coffee:co ...

javascriptnode.jsfirebasefirebase-admin

What is the best way to retrieve a property value from an object using the .find() method?

I've encountered a problem with the following code snippet in my function: let packName: string = respPack.find(a => {a.id == 'name_input'}).answer.replace(/ /,'_'); My goal is to locate an object by matching its id and retrie ...

javascriptangulartypescript

Sending an array from the front-end to the back-end in Laravel with JavaScript

I am experiencing difficulty passing a objs array to a function in a Laravel controller using ajax. Unfortunately, I am not receiving any data after the post request. <script> var itemCount = 0; var objs=[]; $(document).read ...

javascriptphpajaxmodel-view-controllerlaravel-5

Display the output of JSON.stringify in a neatly formatted table

After sending my table data to the database using ajax, I am now trying to retrieve it by clicking on the open button. $.ajax({ type: "POST", url: "http://localhost/./Service/GetPageInfo", dataType: "json", ...

javascriptjqueryjsonajax

Modify Knockout applyBindings to interpret select choices as numeric values

Utilizing Knockout alongside html select / option (check out Fiddle): <select data-bind="value: Width"> <option>10</option> <option>100</option> </select> Upon invoking applyBindings, the options are interprete ...

javascripthtmlknockout.js

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

javascriptphpjqueryhtmlajax

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

I'm attempting to create a unique binding handler that applies role-based access to fields on a page. This custom handler uses the values of other observables from the viewModel to enable or disable input controls based on certain conditions. However ...

javascriptjqueryknockout.jsknockout-3.0