Your van Gogh Portfolio Project

Introduction

In this portfolio project, you will embed a YouTube video in the ‘van Gogh’ web page you previously created in the Working with Images exercise and later updated it in the Working with Google Fonts and Styling Hyperlinks with CSS exercises.

You can view how this web page will look at the end of this Tutorial by clicking the link below.

index.html

Portfolio project folders and files

Your first task is to obtain the files you need for this project.

1. If a sub-folder named 📁 portfolio does not already exist inside your ‘main’ 📁 websites folder, create it now.
2. In your 📁 portfolio sub-folder, create a new sub-folder with this name:   van-gogh
3. In this new 📁 portfolio/van-gogh sub-folder, create the usual folder structure for storing the relevant stylesheet and image files. See below.
4. Display your 📁 exercises sub-folder, and copy the page-5.html web page.
5. Paste page-5.html into your new 📁 portfolio/van-gogh sub-folder and rename the web page to index.html.
6. From your 📁 exercises/assets/css sub-folder, copy the style-5.css stylesheet.
7. Paste style-5.css into your new 📁 portfolio/van-gogh/assets/css sub-folder and rename the stylesheet to style.css.
8. Next, copy these four image files from your 📁 exercises/assets/img sub-folder:     bedroom-arles-van-gogh.jpg
     cafe-terrace-at-night-van-gogh.jpg
     starry-night-van-gogh.jpg
     yellow-house-van-gogh.jpg
9. Paste them into your new 📁 portfolio/van-gogh/asset/img sub-folder.

You now have all the files you need for this portfolio project. Your complete sub-folder and files structure should look as shown below.

Before you begin the project, however, you need to rename the stylesheet link in the web page.

1. In VS Code, open the van Gogh index.html file.
2. Rename the linked stylesheet from style-5.css to style.css as shown below.
3. When finished, save the web page.

Click the link below to view an example of this web page as it should look now.

Web page (before YouTube video embedded)

Making the video responsive

The problem with embedding YouTube videos directly is that they are positioned in an iframe container. You cannot make an iframe responsive. A fixed width and height need to be set for it.

Follow these steps to make the embedded video scale according to the width of the user’s screen.

1. In your index.html file, ‘wrap’ the Youtube video code in a new container as follows:

   <div class="video-container">
      <iframe src="https://www.youtube.com/embed/wI2i5ca1RT4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
   </div>
   

2. In VS Code, switch to the van-gogh.css stylesheet.
3. At the bottom of the stylesheet, copy-and-paste the following.

   .video-container {
       overflow: hidden;
       position: relative;
       width: 100%;
       margin-bottom: 32px;
   }
               
   .video-container::after {
       padding-top: 56.25%;
       display: block;
       content: '';
   }
               
   .video-container iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   

   Note the padding-top: 56.25% style rule. That is set according to the aspect ratio of the video.   In this example, the video’s aspect ratio is 16:9. Hence the figure of 56.25%, which is the result of 9/16.   If the embedded video is 4:3, however, you would set the padding value to 75%.
4. In your web browser, reload and view your index.html web page on desktop/laptop and mobile screens.

Web page (with responsive YouTube video embedded)