@section('style')
<STYLE>
   .video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
    
 </style>   
    @stop

 

     <div  >
     
     <!--  Embed YouTube Video using <object> Element   -->
     
     
       <object data='https://www.youtube.com/embed/nfk6sCzRTbM?autoplay=1' 
        width='560px' height='315px'>
    </object>
     <div class="video-responsive">
      <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>

     
      <div style="width: 400px; height:400px;">  
  <embed src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1" wmode="transparent" type="video/mp4" width="100%" height="100%" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen title="Keyboard Cat">  
</div>
     
     
     
     
     
     
                  <!-- https://developer.vimeo.com/player/sdk/basics                شرح هناااااااااااا -->  
  <iframe src="https://player.vimeo.com/video/76979871?h=8272103f6e" width="400" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 

 <iframe src="{{asset('assets/images/vedio/ramadan.mp4')}}" width="400" height="{video_height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  <script src="https://player.vimeo.com/api/player.js"></script>
  <script>
  var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
      console.log('Played the video');
    });

    player.getVideoTitle().then(function(title) {
      console.log('title:', title);
    });
	  </script>
  
                     </div>
                
  

@section('scripts')
   
    @stop