-
Posts
-
Hello,
I found out that YouTube videos can be added as media to the Image with Hotspot tooltips. Unfortunately, there is a reasonably serious shortcoming.
The ‘text’ tab (as opposed to the ‘visual’ tab) mistreats some of the code required by the YouTube embed player in an Image with Hotspot tooltip. It is saved appropriately and the page displays correctly. However, when one tries to edit a tooltip much of the YouTube embed and player code is deleted.
I was able to overcome this problem by saving the YouTube embed player code to a text file and tracking my changes there, However, it appears that very little development would be required to have ‘Image with Hotspots’ support Text, Images and YouTube videos (other video as well???)
This is an example of this markup:
<p class=”embed-youtube” style=”text-align: center; display: block;”><iframe style=”margin-top: 10px;” src=”https://www.youtube.com/embed/PjCPCV0Pf2w?controls=0;rel=0;autoplay=1;modestbranding=1;loop=1;playlist=PjCPCV0Pf2w” width=”310″ height=”155″ frameborder=”0″ allow=”autoplay; encrypted-media”></iframe>Dome, Flattened Dome & Bridging Composition</p>
It can be seen in tooltip #8 on this post of my site:
https://ensightful.com/2020/06/26/complex-composition/
ps I love Enfold!
Hey danowen777,
Thank you for the inquiry.
The theme automatically formats the content of the tooltip and encodes some characters in the front and backend, which is probably why it’s stripping some of the player markup. If you want to disable the formatting, we have to modify the enfold\config-templatebuilder\avia-shortcodes\image_hotspots\image_hotspots.php, look for this code around line 854:
$output .= "<div class='av-image-hotspot av-image-hotspot-{$counter} {$hotspot_tooltip_display}' data-avia-tooltip-position='{$data_pos}' data-avia-tooltip-alignment='{$align}' data-avia-tooltip-class='{$tooltip_width} {$tooltip_pos} {$extraClass} {$tooltip_style} av-tt-hotspot' data-avia-tooltip='".esc_attr(ShortcodeHelper::avia_apply_autop($content))."' style='{$pos_string}'>";Remove the esc_attr and avia_apply_autop wrapping the $content.
$output .= "<div class='av-image-hotspot av-image-hotspot-{$counter} {$hotspot_tooltip_display}' data-avia-tooltip-position='{$data_pos}' data-avia-tooltip-alignment='{$align}' data-avia-tooltip-class='{$tooltip_width} {$tooltip_pos} {$extraClass} {$tooltip_style} av-tt-hotspot' data-avia-tooltip='".$content."' style='{$pos_string}'>";Best regards,
IsmaelDo you understand that there would be real value added to the Image with Hotspots of the Enfold theme if the tooltips would support video?
Hi,
Thank you for the update.
IMO, watching embedded clips inside that tooltip is not ideal — it will close whenever the tooltip is out of focus or when the cursor is not over it and it’s also quite small. It’s also uncommon and maybe unintuitive. Users will probably prefer a link that can open the media file or video inside a modal popup or a lightbox container, or redirect to an external link and watch the video from there.
Best regards,
Ismael
- You must be logged in to reply to this topic.