Good afternoon everybody! We continue our series of posts about advanced TourDash tours content formatting with CSS and HTML editing. We’ve already told you how to use custom fonts in your TourDash tour in one of the previous posts. We hope you enjoyed this feature! Today we will describe how to embed a video in your TourDash tour in a beautiful way.
Do you want to get the same cool borderless designed hotspot for embedded video? We’ll tell you how!
1. Create a new hotspot, switch to the HTML editing mode by pressing the <> and copy the embeded code for the desired video. Embeded code must be wrapped in an extra div element indicating its class, for example “video_bordeless”.
2. Turn off display of the title in the Properties tab as well as set the width the same as the width of your video in the embeded code. The best position for displaying video is the center of the screen.
3. Save the hotspot and open the CSS editor by clicking on the Labs icon in the TourDash editor panel. If you don’t see this icon, it means your account is not included to the enhanced CSS editing. To enable this feature for your account, please contact firstname.lastname@example.org. In CSS Edit tab, you must specify the properties for “video_borderless” class. You can just copy the snippet we’ve prepared.
Then click “Apply styles”.
[button target=”_blank” style=”” class=”btn-default” link=”https://live.tourdash.com/embed/f7f9d3c6ab99442b8d77fc741f49e0f5?pano=Hw3tGh9m-8PMOJutURbxoA&head=173.73108281058484&pitch=1.6097242905915867&zoom=1″]Watch an example[/button]
Advanced HTML and CSS editing gives you unlimited opportunities of your TourDash tour customization! Keep reading our blog, we will post more interesting code and design examples!