According to Google, 53% of users will abandon your mobile site if it takes longer than 3 seconds to load. But what happens when the page loads but your content doesn’t? Video embeds are a popular and easily shareable form of new media content, but they can take a while to load, leaving the user sitting there with an empty video element. Using a custom css loader icon while your embed content is fetched can keep your users engaged until the content loads.
For my personal React site, I noticed I was using a number of video demos in two of my React components, SoftwareEngineering and VideoProduction. So, naturally, I made a Demo component.
I also made a DemosContainer component to house all my Demo components.
These components worked especially well with my PostgreSQL API that I made using Ruby on Rails where I can create, fetch and render demo objects (JSON data). I will go more in depth about this in another blog post. For now, let’s focus on the React components.
Using Redux, I make a fetch to my database, which I have hosted on Heroku. The JSON data I get back, contains the pre-determined information needed to supply my Demo components with key pieces of information:
Date of Development
GitHub Repository URLs (front and/or backend, depending on the project)
Languages and/or Frameworks Used
Live URL (if the project is live)
And most importantly, the YouTube IFrame embed src.
While I complete my fetch in my App component, I iterate over the results and for each JSON object I render a Demo component. But even after the fetch to my database is complete, the IFrame embed src needs to retrieve the right video from YouTube. This means that while the demo component is loaded and the data is retrieved, there is still a period of time where the video content itself has not loaded. Rather than have a bunch of Demo component with text and empty html <video> elements, I wanted to make a loader that stays in place of each Demo component until the IFrame src has been retrieved and loaded.
Here is my loader:
Now, the tricky part was getting my DemosContainer to be able to determine which Demo component(s) that still don’t have the video content loaded. I tried doing this first with an html <video> element. This didn’t work because I wasn’t able to catch the point when the <video> elements YouTube embed src was being fetched. I tried using the YouTube API to utilize functions that could catch this moment, but I had trouble implementing the YouTube API the way I needed it. I wasn’t trying to fetch YouTube videos of a specific category or even from just one (my) account.
I wanted to retrieve specific videos from my profile based on what component the DemosContainer was being imported into. I use it for both my SoftwareEngineering component (for my development portfolio) and my VideoProduction component (for my video production portfolio). After wrestling with the API for a while, I figured it might be easier to see if React (or Semantic/Bootstrap) had a video component or widget that could be used to satisfy my purpose. This is when I stumbled upon ReactPlayer.
ReactPlayer offers a lot of features and callback props for your video elements. You can read more about them in the npm documentation.
The callback that was suitable for my needs was onReady.
All I had to do was write a function (successState) that executes once the content is loaded and the component is rendered. All this function does is set the Demo component’s state from false to true. This causes the Demo component to stop rendering the Loader component. That conditional can be seen here:
I don’t need to write a conditional that renders the ReactPlayer component because it renders automatically once the content is loaded.
ReactPlayer can use different embedded URLs, not just YouTube. It can utilize Facebook video links, Twitter videos, SoundCloud links, DailyMotion, pretty much any sharable video URL.
I hope you find ReactPlayer as useful as I have! While it was useful, I also found that tinkering with the YouTube Player API was also a worthwhile experience. Even though it’s use wasn’t instrumental in my case, I will definitely work more with it in the future (can you say, future blog post?).
If you enjoyed the post or need clarification on anything mentioned, let me know in the comments. Feel free to share and leave claps!
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud…