Add Option for Video Background

[thejimbirch]

Instead of just a plain old image, why can't we have a video background?

This would be a good thing to add once Media is in core (Drupal 8.4)

[preritmohan]

I played with Slick paragraphs and Video embed field. However it comes back with player controls on the video tag which needs some workaround to hide the controls bar. If we can have something similar within Xeno Hero it would be really great. Autoplay and option to hide the controls by default.

[thejimbirch]

It's been a while since I have done video backgrounds, but will look into it.

If you are embedding from youtube, you can add parameters to the url to autoplay, hide controls, etc... Not sure if the Media embed module saves that or not. Will have to explore.

Reference: https://drupal.gatech.edu/handbook/embed-youtube-video-autoplay-looping-and-no-controls https://developers.google.com/youtube/player_parameters#autoplay

[preritmohan]

Hey Jim, any luck with video backgrounds with xeno?

[thejimbirch]

I've uploaded a new branch 8-video, which is a good start but not there yet.

Additions

• Dependency on the Drupal video_embed_field module.
• A Background Video field
• Two new functions in the .module file that set defaults on the YouTube and Vimeo players.
  • YouTube
  • Autoplay: On
  • Controls: Off
  • Loop: On (Does not work)*
  • Show Info: Off
  • Vimeo
  • Autoplay: On
  • Byline: Off
  • Loop: On (Does not work)*
  • User Portrait: Off
  • Title: Off
• Configuration for new fields in the xeno_hero entity_form and entity_view config

Changes

• In the template and CSS, paragraph--type--xeno-hero__image was changed to paragraph--type--xeno-hero__background

To Dos

• [ ] Update script so the parallax works with the video. It currently sets a background image in CSS. @christine-harder
• [ ] Investigate why loops don't work in embedded players. This may be beyond us.
• [ ] Experiment with the many contrib modules that extend video_embed_field which work with additional video providers. Full list at https://www.drupal.org/project/video_embed_field
• [ ] Write an update hook

To Update

The easiest way to update would be to uninstall and reinstall the module. However, you would need to delete all of your xeno_hero bundles for this.

You could also import the following config files manually into your Drupal install, and then update the module, and clear the cache.

field.storage.paragraph.xeno_background_video.yml field.field.paragraph.xeno_hero.xeno_background_video.yml

Once we get all the kinks worked out, we may be able to write an update hook

[thejimbirch]

I have an example/test up at:

http://video-bootstrap-paragraphs.pantheonsite.io/testing-video

If you are going to use this in the mean time because the loops are not working, better to find a long video!

[preritmohan]

Great work! Thanks Jim. For adding videos apart from vimeo and youtube I have used https://www.drupal.org/project/video_embed_html5 module. This takes any video URL hosted anywhere.

For looping the video and getting autoplay to work (for iOS devices add playsinline attribute) I have overridden the player twig file that comes with the above module like this.

<video loop autoplay muted playsinline width="100%">
   <source src="{{ src }}" type="{{ type }}"/>
</video>

Thanks

[thejimbirch]

Which template is that in @preritmohan? The entity or the field?

[preritmohan]

It's video_embed_html5\templates\video-embed-html5.html.twig module

[thejimbirch]

Albert says: I was able to get the youtube video to loop. Just need to add the video id in the playlist parameter. http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID. https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work