-1

I'm looking for simple javascript function for play youtube video fullscreen on click. without using youtube api. It is work fine. but i don't want to use youtube api. I want pure javascript on click event play fullscreen video.

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
       
        
        
        
        <script src="https://www.youtube.com/iframe_api"></script>
    <button>play fullscreen</button><br>
    <div id="player"></div>
        
        <script>
        
            var player, iframe;
            var $ = document.querySelector.bind(document);
    
            // init player
            function onYouTubeIframeAPIReady() {
              player = new YT.Player('player', {
                height: '200',
                width: '300',
                videoId: '8LVN7WVgx0c',
                events: {
                  'onReady': onPlayerReady
                }
              });
            }
    
            // when ready, wait for clicks
            function onPlayerReady(event) {
              var player = event.target;
              iframe = $('#player');
              setupListener(); 
            }
    
            function setupListener (){
            $('button').addEventListener('click', playFullscreen);
            }
    
            function playFullscreen (){
              player.playVideo();//won't work on mobile
    
              var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
              if (requestFullScreen) {
                requestFullScreen.bind(iframe)();
              }
            }
        
        </script>
    </body>
    </html>
Jason Delaney
  • 458
  • 8
  • 21
Tausib Raut
  • 5
  • 7

2 Answers2

0

Try this old school code : 

 <object width="640" height="390">
      <param name="movie"
             value="https://www.youtube.com/v/atI4JKFQYoU"></param>
      <param name="allowScriptAccess" value="always"></param>
      <embed src="https://www.youtube.com/v/atI4JKFQYoU"
             type="application/x-shockwave-flash"
             allowscriptaccess="always"
             width="2000" height="1000"></embed>
    </object>

Not javascript but something you can build upon this

Mujthaba Ibrahim
  • 207
  • 3
  • 16
0

I've had lots of luck using this...

http://www.fancyapps.com/fancybox/

Pretty straightforward and lots of features