Skip to content
Snippets Groups Projects
Commit 6fe86ed7 authored by baldwinlouie's avatar baldwinlouie Committed by Yas Naoi
Browse files

Issue #3213300 by baldwinlouie, yas: Add support for modal video pop-up

parent 03dfb11f
No related branches found
Tags 8.x-1.6
No related merge requests found
......@@ -41,5 +41,6 @@ framework:
css/views.css: {}
css/media.css: {}
css/fonts.css: {}
css/modal.css: {}
js:
js/menu.js: {}
.modal {
text-align: center;
padding: 0!important;
}
.modal-content {
box-shadow: none;
border: none;
border-radius: 0;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-dialog {
max-width: 800px;
margin: 30px auto;
}
.modal-body {
position: relative;
padding: 15px;
}
.close {
position: absolute;
right: -30px;
top: 0;
z-index: 999;
font-size: 2rem;
font-weight: normal;
color: #fff;
opacity: 1;
}
.close:hover,
.close:focus {
color: #fff;
opacity: 1;
}
button.video {
margin-bottom: 10px;
}
......@@ -68,4 +68,24 @@
}
}
// Initialize modal behavior.
Drupal.behaviors.videoModal = {
attach: function() {
let video_src;
$(".video").click(function() {
video_src = $(this).attr("data-src");
});
// Play the video.
$("#modal").on("shown.bs.modal", function(e) {
$("#video").attr("src", video_src);
});
// Unset the video.
$("#modal").on("hide.bs.modal", function(e) {
$("#video").attr("src", '');
});
}
}
})(jQuery);
......@@ -44,32 +44,52 @@
* @see template_process()
*/
#}
{%
set body_classes = [
logged_in ? 'user-logged-in',
not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
node_type ? 'page-node-type-' ~ node_type|clean_class,
db_offline ? 'db-offline',
theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
theme.has_glyphicons ? 'has-glyphicons',
theme.settings.font_size ? font_size_html,
]
%}
{% set body_classes = [
logged_in ? 'user-logged-in',
not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
node_type ? 'page-node-type-' ~ node_type|clean_class,
db_offline ? 'db-offline',
theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
theme.has_glyphicons ? 'has-glyphicons',
theme.settings.font_size ? font_size_html,
] %}
<!DOCTYPE html>
<html {{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
</head>
<body{{ attributes.addClass(body_classes) }}>
<a href="#main-content" class="visually-hidden focusable skip-link">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token|raw }}">
</body>
<js-placeholder token="{{ placeholder_token|raw }}">
</head>
<body{{ attributes.addClass(body_classes) }}>
<div class="container">
<div class="modal fade" id="modal" tabindex="-1" role="dialog"
aria-labelledby="modalPopup"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#main-content" class="visually-hidden focusable skip-link">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token|raw }}">
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment