How to crop video playing in iframe using CSS?-CodePudding

How to crop this video in HTML and what should I put in CSS

<h3>Nepal vs Indonesia</h3>

<section >
    <iframe width="560" height="315" 
      src="https://www.media.gov.kw/LiveTV.aspx?PanChannel=KTVSports"
      frameborder="0" allowfullscreen></iframe>
</section>

CodePudding user response：

Just give a class name like below and set CSS Height and Width according to your requirement.

<div class='video-wrapper'>

.video-wrapper {
        position: relative;
        height: 0;
        padding-bottom: 56.25%;
    }
  
    .video-wrapper iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

<div class='video-wrapper'>
    <iframe width="560" height="315" src="https://www.media.gov.kw/LiveTV.aspx?PanChannel=KTVSports" frameborder="0"
        allowfullscreen></iframe>
</div>

CodePudding user response：

You can use this code:

<div >
    <div >
      <iframe width="560" height="315" 
      src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
      frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

.container{ max-width: 1024px; margin: 0 auto; background-color: aliceblue; height: 100vh; }
.container .video-wrap{ margin: 0 auto; width: 560px; }
.container .video-wrap iframe{ width: 100%; height: 315px; }