Code on A computer
HTML/CSS,  Instructional Design

Let’s Embed. That. Video!

When asked to pick a professional development project for the current course I am taking, I had no idea what to choose. As my professor gave the class examples and I decided to choose something that I was extremely uncomfortable with: HTML and CSS. Luckily there were a few of my classmates who also chose this path and we have been able to share resources and check-in with each other on Slack.  

Since we began to design our online portfolios I felt this would be a great resource to have but I had no prior knowledge and I was afraid I would fail. This week I really stepped into the beginning of learning HTML. With a digital story in hand, I tried to embed it with the theme on my webpage but  I ran into an issue. I decided to jump in and try embedding this video on my own! Here is how it went:

I began by downloading my video from Adobe Spark.

Adobe Spark Video Processing Screen

Once complete, I uploaded it to YouTube. (You can just get an embed code from Adobe Spark but I prefer YouTube as a platform)

YouTube Uploaded

After the upload, I research at how to embed a video.

I selected “Embed” from the YouTube share screen and copied the code.

Embed YouTube code

I was able to take the embed code and put it in my about me page once I selected the code view in the settings. 

Screen View in About Me page

I published the page: Success! 

Embed code and publish screen

But…I wanted the video centered on my About Me page.

I looked in W3Schools but could not the solution so I moved to FreeCodeCamp and found a response to that question.

I was able to write the new code above the embedded code and…

Center Embed Code

The Final Product!

Final Published About Me Page

This was a simple fix and really just a chance to get my feet wet but I am proud that I was able to do it on my own and it all worked seamlessly as I know that is not always the case. 

I look forward to trying something a bit more difficult and sharing my experience learning HTML and CSS going forward. Let me know what your experience is with HTML and CSS! How did you begin your journey? 


Leave a Reply to Jenny Erickson Cancel reply

Your email address will not be published. Required fields are marked *

Font Resize