September 4, 2014

Weebly Tricks #71 - YouTube Video Frames

Posted by Domingo Tambasacan at 9/04/2014

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.

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.

Where to place these codes? Click Here!

background:url( no-repeat top center;

.youtube-frames1 {
  max-width: 530px;
  max-height: 416px;
  background-image: url(;
  margin: 10px;
  padding: 23px 83px 51px;
  overflow: hidden;
  top: 45px;

Where to place these codes? Click Here!

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

<div class="youtube-frames">
<iframe allowfullscreen="" frameborder="0" height="283" src="//" width="511"></iframe>

<div class="youtube-frames1">
<iframe width="530" height="335" src="//" frameborder="0" allowfullscreen=""></iframe></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, the ID is gmrLjUnJtx4.


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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook

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!



Have any question? Feel Free To Post Below:


© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top