How to make embedded you tube video size responsive

Discussion in 'HTML & Website Design' started by Mark White 100, Feb 3, 2016.

0
  1. #1
    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.
     
    Mark White 100, Feb 3, 2016 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #2
    Hi there Mark White 100,

    here is one posible solution to your problem...

    

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
.iframe-holder {
    position:relative;
    width:70%;
    padding-top:39.375%;
    margin:20px auto;
 }
.iframe-holder iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
 }
</style>

</head>
<body>

<div class="iframe-holder">
 <iframe src="https://www.youtube.com/embed/VcUT4pbueR8?rel=0"></iframe>
</div>
<div class="iframe-holder">
 <iframe src="https://www.youtube.com/embed/nxCtS02v2lM?rel=0"></iframe>
</div>
<div class="iframe-holder">
 <iframe src="https://www.youtube.com/embed/VF0kUxplxmk?rel=0"></iframe>
</div>

</body>
</html>
    Code (markup):

    coothead
     
    denis bayly, Feb 3, 2016 IP