Step 1. Find the landing page's header image's width and height dimensions

Right click on the center of the header image, scroll down to "Inspect Element". You should see the dimensions for the header appear underneath the header image. If you don't, simply hover your mouse over the image file in the white area, or the dimensions should appear on the bottom-right.

The dimensions for this header image are 520x380. This means the YouTube video we install needs to have a width of 520px and a height of 380px.

---

Step 2. Open weebly's html/css editor

Click on "Design" at the top, then click on "Edit HTML/CSS" on the bottom left.

---

Step 3. Add HTML Coding

Select the page layout "landing.html" on the left under "Page Layouts". Now scroll down until you find the following HTML code "<div class="wsite-header" ></div>".

Place the orange code within the code above. It should look like this:

​<div class="wsite-header">
<div id="top-main-wrap">  
  <div class="container" >
        {top:content  global="false"} 
   </div>
</div>
</div>

Partial coding courtesy of iwebic.

---

Step 4. Add CSS Coding

Click on "main-style.css" on the left and scroll all the way to the bottom. Add the following code:

#top-main-wrap {
    background: #000000;
}
#top-main-wrap .container {
    background:  none;
    padding:  0;
    width: 920px;
    height:200px;
    color: #fff;
}
#top-main-wrap .container p {}
#top-main-wrap .container a {}
#top-main-wrap .container blockquote {
    font-size:16px;
    font-style:italic;
    padding: 1px 30px 50px 30px;
}
#top-main-wrap .container form .wsite-button {
    margin-top:20px;
}
ul.weebly-content-area {
position: relative !important;
padding: 0px 0 !important;
margin: 0px 0 !important;
width: 100% !important;
}

​Partial coding courtesy of iwebic.

---

Step 5. Edit css coding

There is only 1 part of the CSS coding from above that you need to edit and it is in orange as shown below.

#top-main-wrap .container {
    background:  none;
    padding:  0;
    width: 520px; Change this to the header image's width from Step 1.
    height: 380px; Change this to the header image's height from Step 1.
    color: #fff;
}
​
Click save. The hard work is over and the fun may begin!

---

Step 6. Drag & Drop the "embed code" Element to the header image

From the left side of the screen, grab the "EMBED CODE" element and drop it into the header image.

---

Step 7. customize and Grab your video

This is where you need to grab your customized video from YouTube.

For current YouTube video customizations, search for your YouTube video. Then click the share icon located under the video, click on embed, and then copy the embed code YouTube provides.

---

Step 8. paste video code in "embed code" element

Now simply head back to your site and paste the code of the video YouTube provided into the "EMBED CODE" we dragged and dropped into the header image area from Step 6.

Important: In order for your video to fit appropriately, you need to adjust the width and height of the code you just pasted into the "EMBED CODE" element. Simply look for "width" and "height" in the video code and adjust it to the dimensions you acquired in Step 1.

---

You're done! Publish your site to see how your Youtube video looks!

---

comments powered by Disqus