Weebly Embed Google Drive Video
Alex Reyes
C HAPTER 1
Weebly: Embed Google Drive Video District teachers have a choice of using Google sites or Weebly to develop their web site. The free version of Weebly does not support the upload of video. Teachers in the district have access to Google Drive and they can use Drive to host their videos. These videos from Google Drive can be streamed onto web sites like Weebly. In this lesson we will learn how to share a video in Google Drive and embed that share link into a Weebly page.
L ESSON 1
Weebly: Embed Google Drive Video
Share and Embed
Place a check mark next to the video and click the share button.
I’ve uploaded a QuickTime video into my Google Drive. If you don’t know how to do this, please check out one of my other ebooks that demonstrates this process.
2
Google Drive: Video Sharing
A sharing settings dialogue box will display. When you upload a file into Google Drive it isn’t automatically viewable to anyone but yourself. The document or video is private.
The current link setting is to share this video with specific people. This is usually with an invitation through Google Drive.
Before sharing this link on a web page, we need to change the permission so anyone can view the video. Click the change link.
3
Google Drive: Video Sharing
Select the option to share this video with anyone that has the link and click Save. If you would like to learn more about the different sharing options please check my ebook on sharing Google Drive video.
The share link will automatically be highlighted. Copy this link by pressing Command C on Mac or Control C on Windows.
4
Google Drive: Video Sharing
In Weebly I’ve created a videos page, but it can be any kind of page or an existing page.
Drag in the Embed Code element.
5
Google Drive: Video Sharing
Click in the custom HTML text.
A custom HTML box will display with the option to enter your own HTML. A menu box also displays where you can choose how to display your content. In this case we can choose to left, center or right align our content. Let’s center the video by clicking the center align button.
6
Google Drive: Video Sharing
After clicking the center align option, click the Edit Custom HTML button to go back into the HTML box.
Now that we have our custom HTML box available, let’s enter our HTML embed code. You’re going to have to type some HTML but it’s not very complex.
7
Google Drive: Video Sharing
To embed content, we need to use the iframe tags. Type <iframe > to begin.
In HTML you need open and closing tags. To close the iframe tag type, </iframe>. Pretty easy, right?
8
Google Drive: Video Sharing
Go back to the first tag and click after the word iframe.
Type src=” “, That’s src followed by an equal sign and two quotation marks. Each quotation mark is separated by a space.
9
Google Drive: Video Sharing
Place the cursor between the quotation marks. Weâ&#x20AC;&#x2122;re going to paste the share link here.
Paste the share link from your video in Google Drive. The link must be between the two quotation marks. The left quotation mark begins the link with â&#x20AC;&#x153;https://...
10
Google Drive: Video Sharing
Go over to the right quotation mark after the link and click once to the right of the quotation mark.
Press the space bar after the quotation mark and type width=”720px”. This instruction tells the frame that will embed the video to be 720 pixels wide. I chose 720 pixels because my video is in HD. Your video might be in the standard video format. If it is, you can choose either 640px or 800px for the width. If you’re not sure, you can use 720px and your video will be fine.
11
Google Drive: Video Sharing
Press the spacebar once after the width and type height=”480px”.
We’re done. Click once outside the custom HTML box to see a preview.
If your video is 640px wide, you can use 480px for the height. If you are using 800px for the width, you can use 600px for the height.
12
Google Drive: Video Sharing
You should see the first image of your video with a play button at the center. If you donâ&#x20AC;&#x2122;t, you can go back and check your HTML for spelling mistakes. This is most often the main cause of why the code doesnâ&#x20AC;&#x2122;t work.
To edit the code, click the edit Custom HTML button.
13
Google Drive: Video Sharing
The link you pasted should be fine so check your spelling and make sure you have opening and closing quotation marks in the right places.
One of the things that iframe does, is it places a border around embedded media. If your okay with the border, then your done. I find it annoying and amateurish looking. I like to remove that border.
14
Google Drive: Video Sharing
After the height dimensions I like to add frameborder=”0”. This removes the border from the embedded media.
When you’re ready, click the publish button to show the video to the world.
15
Google Drive: Video Sharing
Your video should look the same way it did in the Weebly preview.
16