CODEWITHSUNDEEP
htmlcssimagereplaceyoutube
Clara Efrona
Clara Efrona

Reputation: 23

Replace an image with a youtube video with css

I'm using a template website. I would like to replace the existing image with a youtube video. I know how to get the code from youtube to match the image dimensions, but I don't know what to change in the template.

Here's the code from the css...

.section-1 { background: url(../img/left-box-1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 600px; position: relative; }

And the corresponding section in the html...

<div class="col-md-8 section-1 nopadding" id="work">
                <div class="logo-1 wp1"></div>
            </div>

Upvotes: 2

Views: 2184

Answers (1)

kaxi1993
kaxi1993

Reputation: 4700

<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<style>
.section-1 { background: url(../img/left-box-1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 600px; position: relative; }
</style>
</head>
<body>
<div class="col-md-8 section-1 nopadding" id="work">
    <div class="logo-1 wp1">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/8dKLp2KB8u4" frameborder="0" allowfullscreen>
        </iframe>
    </div>
</div>
<script>

</script>
</body>
</html>

Upvotes: 1

Related Questions