How to embed your Youtube video on your website properly

6 months ago

Hey, ever wonder how to embed a YouTube video on your website so it scales nicely at any resolution? It's not that hard. You just need to place the iframe with the video in a div positioned relatively, and the iframe itself should be positioned absolutely. I threw in another div here, but it's not necessary. Then, in the CSS, set values for the container and the iframe like below, and voila, you can scale it however you want. It'll even look great on a Nokia 3310 :P

HTML code:


<html>
<head>

<style>
body {background-color:grey;}
.ytcontainer {
position: relative;
width:100%;
height:0;
padding-bottom: 56.25%; /* Adjust this value if your video isn't in 16:9 aspect ratio */

}
.ytvideo {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0 auto;
}
.redbox100 { background:red; margin:20px 0;height:100px;}
.green {background:green;height:200px;}
</style>


</head>

<body>
<div class="redbox100">
<h2>Hey!</h2>
</div>

<div  class="ytcontainer">
<iframe class="ytvideo"  src="https://www.youtube.com/embed/orovBu5-SOI" frameborder="0">
</iframe>
</div>

<div class="redbox100 green">
<h2>Hey!</h2>
<p>and that's about it.</p>
</div>

</body>
</html>

One last note: it's good if the video thumbnail (if you've customized it) has the same size as the video frame. Otherwise, the thumbnail might show those ugly black bars on the sides or top and bottom of the video. If the thumbnail is an actual frame from the video, then no worries - everything will work great!

Here's a quick video of making this code for you.
and baby steps showing what is going on and what are the results of every piece of the puzzle.

html css youtube coding movies

0.000

3 comments

@libertycrypto27 79

6 months ago

@tipu curate

0.000

@tipu 68

6 months ago

Upvoted 👌 (Mana: 10/60) Liquid rewards.

0.000

@hivebuzz 74

5 months ago

Congratulations @piotrgrafik! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

	You received more than 37000 HP as payout for your posts, comments and curation. Your next payout target is 38000 HP. _{The unit is Hive Power equivalent because post and comment rewards can be split into HP and HBD}

_{You can view your badges on your board and compare yourself to others in the Ranking}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

0.000