Weebly Tricks #71 - YouTube Video Frames

Here is a sleek and clean way of presenting the featured video of your site. The idea is simple, we will find a nice frame for our YouTube videos and let the player fit on its screen.  Though typical, some haven’t seen this style yet and if you’re a businessman, you better try one.

CLICK HERE FOR LIVE DEMO

I only came with this idea when I’m looking for a good sponsor. I stumbled on this site called “Logaster”. Look how they did a very simple, very clean video presentation using the laptop frame. This is their landing page so perhaps it’s a good idea to do the same. Now it’s your choice to what serves the best.

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
.youtube-frames{
background:url(http://mwtdatabase.weebly.com/files/theme/BS+Monitor.png) no-repeat top center;
height:458px;
width:580px;
padding-top:38px;
padding-left:72px;
margin:10px}

.youtube-frames1 {
  max-width: 530px;
  max-height: 416px;
  background-image: url(http://mwtdatabase.weebly.com/files/theme/notebook.png);
  margin: 10px;
  padding: 23px 83px 51px;
  overflow: hidden;
  top: 45px;
}
</style>

---

BODY CODE
Where to place these codes? Click Here!

---

You may choose from two different style, either the desktop or the laptop frame.

Desktop

<div class="youtube-frames">
<iframe allowfullscreen="" frameborder="0" height="283" src="//www.youtube.com/embed/_uUgIy0shAg?feature=player_embedded" width="511"></iframe>
</div>

Laptop

<div class="youtube-frames1">
<iframe width="530" height="335" src="//www.youtube.com/embed/-lutE4mUQ08?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe></div>
</div>

Notes from the two codes above:
Red mark text – This will be your YouTube video ID. You can get it by getting the last variables after the “v=”on the current video URL you are playing. Sample for https://www.youtube.com/watch?v=gmrLjUnJtx4, the ID is gmrLjUnJtx4.

---

CONCLUSION

---

This tutorial is no brainer and uses the basic skills needed. However, it is still interesting to add simple but useful tips. As I said earlier, this works well on landing pages to show the featured video of your website.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!