Challenge Recaps

2 MIN READ

60+ Examples of Video Backgrounds and Cinemagraphs #95

Staff

10 years ago

Video Backgrounds in E-Learning RECAP #95: Challenge | Recap

Background video and cinemgraphs are a great way to visually engage your learners. This week’s challenge features more than 60+ creative ideas for using interactive video in online training.

Special thanks and welcome to first-time challengers: Marco D'Alessio, Rachel Craig, Avinash Sharma, Dena Fife, Mushtaq Ahmed Syed, James Brand, Claudia Scheel, Dave Neal, and John Soudias. Thank you so much for joining the challenges!

Remember: The challenges are always open. You can jump into this or any previous challenge anytime and we'll update the recap post to include your work.

Tracy Carroll

View demo | Learn more | Tracy Carroll | Website | @1tracycarroll

Montse Anderson

View demo | Montse Anderson | Website | @mLearning

Paul Alders

View demo | Paul Alders | Website | @paulalders

Matt Guyan

View demo | Matt Guyan | Website | @MattGuyan

Jackie Van Nice

View demo | Learn more | Jackie Van Nice | @jackietrains

Jackie Van Nice

View demo | Learn more | Jackie Van Nice | @jackietrains

Dan Sweigert

View demo | Dan Sweigert | Website | @elearningwdan

Alexander Salas

View demo | Alexander Salas | Website | @stylelearn

Alexander Salas

View demo | Alexander Salas | Website | @stylelearn

Rachel Craig

View demo | Rachel Craig

David Anderson

View demo | David Anderson | Website | @elearning

Veronica Budnikas

View demo | Veronica Budnikas | Website | @verobudnikas

Dave Neal

View demo | Dave Neal | Website

Chris Lee

View demo | Chris Lee | Website

David Jones123

View demo | Learn more | David Jones123 | Website | @ourdavidteacher

New to E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.

If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Share Your Video Background Examples!

The video background challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this challenge to include your examples!

Published 10 years ago

Version 1.0

Challenge Recap

E-Learning Challenge

DavidAnderson

Staff

Joined October 22, 2010

View Profile

Challenge Recaps

Check out past challenges and examples.

JackieVanNice
Super Hero
10 years ago
This feels like maybe the second-most-entered challenge after the ID quote one. It's a hit! :-D
- DavidAnderson
  Staff
  10 years ago
  I think it's the most or second-most active for one week totals.
  
  The three most-active challenges:
  
  #84 https://community.articulate.com/articles/image-sliders-galleries-in-elearning
  
  #79 https://community.articulate.com/articles/creative-menu-navigation-examples-for-elearning
  
  #73 https://community.articulate.com/articles/oddest-elearning-title-of-the-year
KartikTyagi
Community Member
10 years ago
hey david,

There's a suggestion from my side. Instead of putting all the examples why don't you just post the best 10 or 15 examples here or rank all the examples.
LindaLorenzetti
Super Hero
10 years ago
David, can you please add mine on to the end?
StacySwan-c810f
Community Member
10 years ago
Hi! I know I am late to the challenge (this is the first time I am participating) but I have an demo of how I used video as a background.

https://dl.dropboxusercontent.com/u/64975200/Five%20Tea%20Demo%20-%20Storyline%20output/story.html

Thanks!
- LindaLorenzetti
  Super Hero
  10 years ago
  Welcome to the Challenges Stacy! I like your entry; very nice use of animations, colours and layout. I think I need to pick up some tea now.
  - StacySwan-c810f
    Community Member
    10 years ago
    Thank you Linda!
- DavidAnderson
  Staff
  10 years ago
  Yes! Welcome to the challenges, Stacy! Very cool use of video backgrounds in your example. I just updated the recap to include your entry: https://community.articulate.com/articles/cinemagraphs-video-backgrounds-elearning#StacySwan
  - StacySwan-c810f
    Community Member
    10 years ago
    Thank you, David!
MattNelson
Community Member
10 years ago
Great examples from everyone! But has anyone else had difficulty getting their videos to stay in the background on mobile devices?
We just developed a course last week with a video background that looked great, but when testing on an iPhone, we discovered the video will play fullscreen once the timeline starts, hiding all the other components on the slide. We tried it on our client's LMS, and again with one of the demos posted here using Safari on the iPhone. I'd love to use video backgrounds, but if they "pop out" on mobile devices, we won't be able to.
Hope I'm not missing something simple - any suggestions?
Thanks!
- DavidAnderson
  Staff
  10 years ago
  Hi Matt,
  
  It's an iOS behavior. Here's our tech note on the issue: http://www.articulate.com/support/storyline-2/sidebar-video-plays-full-screen-in-html5-output-on-iphones
  
  Websites using fallbacks for detecting and getting around mobile constraints.
MattNelson
Community Member
10 years ago
Thank you David! I missed that article.

Nevertheless, probably not a feature we will use in our courses going forward, unless - someday - there is a way for Storyline to change videos so they're not recognized as videos by iOS. The way things are, the video isn't really a background at all.
- DavidAnderson
  Staff
  10 years ago
  I would go with an animated .gif if I needed to use a video background. That way it's guaranteed to work for both desktop and mobile.
jeff
Community Member
10 years ago
Awesome entries.
AriAvivi-0d7a7c
Community Member
10 years ago
I'm still digging through them, but i have 2 questions

1. how do you get the video to loop endlessly
2. can you apply a transparency like you can to a picture?
- DavidAnderson
  Staff
  10 years ago
  Hi Ari,
  
  So there's currently an issue with the normal looping process. We have a technote here with the workaround: http://www.articulate.com/support/storyline-2/how-to-loop-audio-or-video-in-articulate-storyline-sl2
  
  Storyline supports transparency in .flv videos. Here's where you can learn more about that: http://www.articulate.com/support/storyline/how-videos-are-encoded-in-storyline
AriAvivi-0d7a7c
Community Member
10 years ago
I've started a discussion thread with an example
AriAvivi-0d7a7c
Community Member
10 years ago
Thanks, the workaround was a great help.

that's why this is the best community