How to alter HTML code so that youtube videos are size responsive

Hello, I’m having a problem with the videos that I have
embedded on the home page of my website. They look ok on a computer screen, but
on smaller devices like phones and small tablets, they can not adapt/ respond
to the size of the screen. This makes much of the video being off the screen.

I’ve heard you can add a div container to the CSS but was wondering if anyone
has any advice on how to do this.

The home page address is www.whiteweddingvideos.co.uk

Please take a look. Any help would be greatly appreciated.

Something like this? I know it’s vimeo not youtube:

<div class="play-video">
    <iframe src="https://player.vimeo.com/video/999999" allowfullscreen></iframe>
</div>
.play-video {
  position: relative;
  padding-top: 56.25%; /* vid height / vid width * 100 */
  height: 0;
  overflow: hidden;
}
.play-video iframe {
  border: none;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
1 Like

Many thanks for getting back to me ill check this out. cheers

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.