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.


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

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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

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

Home | | Privacy Policy | Top