1<#assign imageBackground = dlTool.getThumbnail(Fondo.data, "4")! />
2<div class="template template-background-video video-component" style="background-image: url('${imageBackground}');">
3 <div class="info-container pt-6 pt-lg-8">
4 <div class="container">
5 <div class="row gy-20">
6 <div class="col-lg-6 col-xl-5 col-12 col-info">
7 <div class="info-wrapper pb-lg-6 pr-lg-6">
8 <#if Titulo.data?has_content>
9 <div class="title-cursive">${Titulo.data}</div>
10 </#if>
11 <#if Subtitulo.data?has_content>
12 <div class="title">${Subtitulo.data}</div>
13 </#if>
14 <#if Texto.data?has_content>
15 <div class="text">${Texto.data}</div>
16 </#if>
17 <#if Enlace?? && Enlace.EnlacePagina?? && Enlace.EnlaceExterno??>
18 <#if Enlace.data?has_content && (Enlace.EnlacePagina.data?has_content || Enlace.EnlaceExterno.data?has_content)>
19
20 <#assign link = "" />
21 <#assign target = false />
22 <#if Enlace.EnlaceExterno.data?has_content>
23 <#assign link = Enlace.EnlaceExterno.data />
24 <#assign target = true />
25 <#elseif Enlace.EnlacePagina.data?has_content >
26 <#assign longLayoutId = Enlace.EnlacePagina.data />
27 <#assign layoutItem = layoutTool.getLayoutByLayoutId(getterUtil.getLong(groupId), false, getterUtil.getLong(longLayoutId)) />
28 <#if validator.isNotNull(layoutItem) >
29 <#if layoutItem.isTypeURL()>
30 <#assign link = portalUtil.getLayoutURL(layoutItem, themeDisplay) />
31 <#else>
32 <#assign link = portalUtil.getLayoutFullURL(layoutItem, themeDisplay) />
33 </#if>
34 </#if>
35 </#if>
36 <div class="btn-wrapper mt-5">
37 <a class="btn btn-border text-uppercase" href="${link}" <#if target>onclick="this.target='_blank'"</#if> title="${languageUtil.format(request, 'go-to-x', Enlace.data)}"><span class="fas fa-tv"><span class="hide-accessible">${Enlace.data}</span></span> ${Enlace.data}
38 <#if target>
39 <span class="sr-only">(se abre en una pestaña nueva)</span>
40 </#if>
41 </a>
42 </div>
43 </#if>
44 </#if>
45 </div>
46 </div>
47 <div class="col-lg-6 col-xl-7 col-12 col-info">
48 <#if Video.data?has_content>
49 <#assign portalURL = themeDisplay.getURLPortal()?trim />
50 <#if portalURL?ends_with("/")>
51 <#assign portalURL = portalURL?substring(0, portalURL?length - 1) />
52 </#if>
53 <#assign rawUrl = Video.getData()?trim
54 temp = rawUrl?split("v=")[1]
55 videoId = temp?split("&")[0]
56 videoURL = "https://www.youtube-nocookie.com/embed/${videoId}" + "?autoplay=0&rel=0&origin=${portalURL}"
57 videoText = Video.TextoVideo.getData()
58 />
59 <#assign titulo = Video.TitleVideo.data?default("Vídeo") />
60 <div class="video-wrapper">
61 <div class="video-responsive" role="region" aria-roledescription="video" aria-label="${titulo}">
62 <button id="play" class="play-button" aria-expanded="false" aria-controls="youtube-video" aria-label="${languageUtil.get(request,'infoasturias-video-play')}">
63 <img src="/o/turismo-asturias-theme/images/icons/video_play.png" alt="${languageUtil.get(request,'infoasturias-video-play')}" />
64 </button>
65 <iframe id="youtube-video" class="responsive-iframe visually-hidden" hidden aria-hidden="true" src="${videoURL}" title="${titulo}" frameborder="0" allow="autoplay; encrypted-media; fullscreen" loading="lazy"></iframe>
66 </div>
67 </div>
68 <#if validator.isNotNull(videoText)>
69 <div class="small text-center my-2">
70 <button id="transcript-toggle" class="btn btn-primary font-size-08" aria-expanded="false" aria-controls="transcript-drawer" data-show-text="${languageUtil.get(request,'infoasturias-video-transcripcion-show')}" data-hide-text="${languageUtil.get(request,'infoasturias-video-transcripcion-hide')}">
71 ${languageUtil.get(request,"infoasturias-video-transcripcion-show")}
72 </button>
73 </div>
74 <div id="transcript-drawer" class="transcript-drawer" role="region" aria-labelledby="transcript-toggle" tabindex="-1" aria-hidden="true">
75 <div class="title">
76 ${languageUtil.get(request,"infoasturias-video-transcripcion")}
77 </div>
78 <div class="transcription-body">
79 ${videoText}
80 </div>
81 </div>
82 </#if>
83 </#if>
84 </div>
85 </div>
86 </div>
87 </div>
88</div>
89<script>
90 Liferay.on('allPortletsReady', function() {
91 var playBtn = document.getElementById('play');
92 var iframe = document.getElementById('youtube-video');
93 var toggleBtn = document.getElementById('transcript-toggle');
94 var drawer = document.getElementById('transcript-drawer');
95
96 if (playBtn && iframe) {
97 var showText = toggleBtn?.getAttribute('data-show-text') || 'Ver transcripción';
98 var hideText = toggleBtn?.getAttribute('data-hide-text') || 'Ocultar transcripción';
99
100 playBtn.addEventListener('click', function() {
101 playBtn.hidden = true;
102 playBtn.setAttribute('aria-expanded', 'true');
103 iframe.src = '${videoURL}';
104 iframe.hidden = false;
105 iframe.removeAttribute('aria-hidden');
106 iframe.classList.remove('visually-hidden');
107 });
108
109 playBtn.addEventListener('keydown', function(e) {
110 if (e.key === 'Enter' || e.key === ' ') {
111 e.preventDefault();
112 playBtn.click();
113 }
114 });
115
116 if (toggleBtn && drawer) {
117 drawer.setAttribute('aria-hidden', 'true');
118 drawer.classList.remove('open');
119 toggleBtn.setAttribute('aria-expanded', 'false');
120 toggleBtn.textContent = showText;
121 toggleBtn.setAttribute('aria-label', showText);
122
123 function toggleDrawer(open) {
124 toggleBtn.setAttribute('aria-expanded', String(open));
125 toggleBtn.textContent = open ? hideText : showText;
126 toggleBtn.setAttribute('aria-label', open ? hideText : showText);
127 drawer.classList.toggle('open', open);
128 drawer.setAttribute('aria-hidden', String(!open));
129 if (open) drawer.focus();
130 else playBtn.focus();
131 }
132
133 toggleBtn.addEventListener('click', function() {
134 var isOpen = this.getAttribute('aria-expanded') === 'true';
135 toggleDrawer(!isOpen);
136 });
137
138 document.addEventListener('keydown', function(e) {
139 if (e.key === 'Escape' && drawer.classList.contains('open')) {
140 toggleDrawer(false);
141 }
142 });
143 }
144 }
145 });
146</script>
147<style type="text/css">
148 .template-background-video .video-wrapper:after{
149 background-image: url('${imageBackground}');
150 }
151</style>
