search

multimedia-storytelling / 83percent.org

Class project developed by students in Journalism 341: Multimedia Storytelling Design
0 stars 0 forks source link

Mast Head Code Questions #14

Open annielentz123 opened 5 years ago

annielentz123 commented 5 years ago

  1. The home page of the website it very impactful - the students walking by conveys an important theme of the project. However, it doesn't always load. Sometimes the section to the right of the grey box is plain white without any content. Why is it that the video doesn't always load? Is there a way to code something to load while the video isn't displaying? Like could you have a photo there while the video was buffering?

  2. Looking at the code of the left side of the Mast Head, it is coded into multiple different divs.

W&L at a Crossroads: Direction of Diversity is Not Black & White

Why is it that these all had to be individual divs? Why could you not consolidate them into one div?

  1. Throughout the site, every object is set to fit within a container.

The university emphasizes Lee’s role as an educator. Some students say they didn't think much about him when they decided to attend W&L. But many of them say they now believe that the university should tell Lee’s entire story.

How do you determine the size of the container? Is that in separate code? Is it pre-set via the coding languages? Do you edit the sizes in pixels or percentages of the screen?

annielentz123 commented 5 years ago

^super cool that when I copied the code I was looking at it displayed as the actual content!!!!

jeffreybarry commented 5 years ago

The video on the opening is not streaming, i.e., loading from YouTube. Instead, the video file is loaded on the same web server as the HTML and CSS. This requires that the video be downloaded before it starts to play. In some cases, as you've experienced, the video is not downloading quick enough to start playing.

could you have a photo there while the video was buffering?

Yes, you could and we should have done that.

You asked about alll those divs!

Let's look at the full code for that section:

  <div class="masthead">
    <div class="masthead-bg"></div>
    <div class="container h-100">
      <div class="row h-100">
        <div class="col-12 my-auto">
          <div class="masthead-content text-white py-5 py-md-0">
            <h1 class="mb-3">W&amp;L at a Crossroads: Direction of Diversity is Not Black &amp; White</h1>

          </div>
        </div>
      </div>
    </div>
  </div>

There's a lot happening there, some of which requires separate divs. I'm going to come back to this comment and breakdown the code a bit later.