How to play video from youku using javascript?

Question

How to play video from youku using javascript?

3.4k Views Asked by mongkon mamiw At 18 May 2025 at 19:23

How to play video from youku using javascript ?

I tried to do like this but not work, how can i do that ?

<iframe id="test" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA==" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;"></iframe>


<div style=" position: fixed; top: 56%; " onclick="play_fn()">Play</div>

<script>
function play_fn(){
    var test = document.getElementById('test');
    test.play();
}
</script>

Original Q&A

There are 3 best solutions below

**Георги Димитров** · Answer 1

Check my solution. You can figure out the styles for your own case, I'm using the span as overlay above the video and when you click on it, it disappears and the video plays.

const videoSection = document.querySelector('.video');
    if(videoSection) {
     const playBtn = document.querySelector('.play-btn');
     playBtn.addEventListener('click', playVideo);
    }

    function playVideo() {
     const iframeHolder = document.querySelector('.iframe-holder');
     const iframeEl = document.querySelector('.iframe-holder iframe');
     const playStr = '?autoplay=true';
     let baseUrl = iframeEl.getAttribute('src');
     
     iframeHolder.classList.add('play');
     iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
     iframeEl.setAttribute('allow', 'autoplay');
    }

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
    <iframe allowfullscreen="" frameborder="0"   src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>



    const videoSection = document.querySelector('.video');
    if(videoSection) {
     const playBtn = document.querySelector('.play-btn');
     playBtn.addEventListener('click', playVideo);
    }

    function playVideo() {
     const iframeHolder = document.querySelector('.iframe-holder');
     const iframeEl = document.querySelector('.iframe-holder iframe');
     const playStr = '?autoplay=true';
     let baseUrl = iframeEl.getAttribute('src');
     
     iframeHolder.classList.add('play');
     iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
     iframeEl.setAttribute('allow', 'autoplay');
    }
    <!doctype html>
    <html class="no-js" lang="">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Title</title>
    </head>
    <body>
    <div class="video">
    <span class='play-btn'></span>
    <iframe allowfullscreen="" frameborder="0"   src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
    </div>
    </body>
    </html>

**Quentin** · Answer 2

play() is a method found on <video> and <audio> elements. An <iframe> is just a means to embed a URL in a page. It provides no API for playing media.

Unless youku provide an API that you can access (I couldn't find one with a quick search), then there is no way to trigger playback from your page.

Standard cross origin security restrictions imposed by browsers prevent you manipulating the embedded page with JavaScript.

**Richardson. M** · Answer 3

Refer this code

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="/js/lib/dummy.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">




  <style type="text/css">
      #overlay {
  position: absolute; 
  top: 100px; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  background-color: rgba(221, 221, 221, 0.3);
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

#v {
  z-index: 1;
}
  </style>

  <title>Overlay HTML over video player</title>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function() {
  var video = document.getElementById('v');
  video.play();
}//]]> 

</script>


</head>

<body>
    <video id="v" controls="">
    <source id="webm" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">

    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay" style='display: none;'>This is HTML overlay on top of the video! </div>






</body>
</html>

How to play video from youku using javascript?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in VIDEO

Related Questions in YOUKU

Trending Questions

Popular # Hahtags

Popular Questions