#143 Turbo Permanent: persist Audio Video and Search results while navigating pages
Often when you visiting media websites, you will want an audio or video player to keep playing even after navigating to another page (like Spotify).
data-turbo-permanent is a Turbo Drive feature that makes it very easy to persist (not refresh) elements when navigating to other pages in an app.
On Superails I use data-turbo-permanent to persist latest search results when navigating around pages.
In this episode we will keep audio and video playing across page navigation.
As a bonus, we will look at opening video picture-in-picture when navigating to another page!
Episode source code: https://github.com/corsego/143-data-turbo-permanent/commit/3a62b6a809d8cdec636f54b1a7da43a005216cd9
Based on this blogpost: https://blog.corsego.com/turbo-play-audio-across-pages
0:00 Examples of using data-turbo-permanent
2:13 Use data-turbo-permanent
3:24 permanent audio player while navigating around app
4:05 permanent video player
4:30 trigger picture-in-picture video player when navigating around the app
1
Featured in playlists
![#59 Hotwire Turbo Streams CRUD](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4MiwicHVyIjoiYmxvYl9pZCJ9fQ==--7b4b94ff669cbcd3485cfcc3f72e9100df7eae48/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#60 Hotwire Turbo Streams Autocomplete Search](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1MywicHVyIjoiYmxvYl9pZCJ9fQ==--c95f098cc49b4d72ecb027c13735c1bedf44cb78/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#63 Hotwire Modals (the right way)](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg2MywicHVyIjoiYmxvYl9pZCJ9fQ==--29f62b39b302aa16a6e6c28453e036aaa724add0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)