Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "autostart" option). Additionally, the video continues playing even after the modal window is closed.

Are there any potential solutions in CSS/HTML to address this challenge? If not, suggestions for JavaScript solutions would be greatly appreciated. 

body{
    margin: 0;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2%;
    padding-bottom: 1%;
}
.boxspace {
    overflow: hidden;
}
.box {
    float: left;
    position: relative;
    width: 16.6666%;
    padding-bottom: 16.6666%;
}
.boxInner {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    overflow: hidden;
    border: thin solid #969696;
    border-radius: 4%;
}
.boxInner img {
    width: 100%;
}
.boxInner .titleBox {
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    margin-bottom: -42%;
    background: #000000;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    font-size: 1.2vw;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.boxInner .titleBox header{
    color: #FFFFFF;
    font-size: 1.4vw;
 }
.boxInner .titleBox p{
    color: #FFFFFF;
    font-size: 1.0vw;
 }
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
    margin-bottom: 0px;
}
.modalVideo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
} 
.modalVideo:target {
    opacity:1;
    pointer-events: auto;
}
.modalVideo > div {
    position: relative;
    margin-top: 2vw;
    margin-left: 20vw;
    margin-right: 20vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left:1.05vw;
    padding-right:1.05vw;
    border-radius: 1vw;
    background: #ffffff;
    font-size: 1.1vw;
}
.modalVideo video {
    width: 100%;
}
.modalProgram {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
} 
.modalProgram:target {
    opacity:1;
    pointer-events: auto;
}
.modalProgram > div {
    position: relative;
    margin-top: 2vw;
    margin-left: 10vw;
    margin-right: 10vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left:2vw;
    padding-right:2vw;
    border-radius: 1vw;
    background: #ffffff;
    font-size: 1.1vw;
}
.close {
    background: #FF0000;
    color: #FFFFFF;
    position: absolute;
    top: 4vw;
    right: -4.2vw;
    text-align: center;
    padding-left:0.75vw;
    padding-right:0.75vw;
    padding-bottom:0.25vw;
    padding-top:0.25vw;
    text-decoration: none;
    border-top-left-radius: 0vw;
    border-bottom-left-radius: 0vw;
    border-top-right-radius: 1vw;
    border-bottom-right-radius: 1vw;
}
.close:hover { 
    background: #464646; 
}
<body class="no-touch"> 

    <div class="boxspace">

        <!-- tiles: -->     
        <div class="box">
            <div class="boxInner">
                <img src="http://dominicm.com/wp-content/uploads/2016/01/steam-arch-linux.png" />
                <div class="titleBox">
                    <header>
                    Linux/C/ARM
                    </header>
                    <p>
                    <a href="#linux-c-arm_video">video</a><br>                  
                    <a href="#linux-c-arm_program">program</a><br>
                    prijavnica
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- end of tiles and wrap -->
    
    <!--Linux/C/ARM - program-->
    <div id="linux-c-arm_program" class="modalProgram">
        <div>
            <a href="#close" title="Close" class="close">close</a>
                <h3>HEADER</h3>
                <p>
                    Paragraph
                </p>
        </div>
    </div>
    
    <!--Linux/C/ARM - video-->
    <div id="linux-c-arm_video" class="modalVideo">
        <div>
            <a href="#close" title="Close" class="close">close</a>
            <video controls autoplay>
                <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
            </video>
        </div>
    </div>
    
 
    <!-- end "no-touch" parameter for body--> 
    <script type="text/javascript">
    $(function(){
        // Determine if this is a touch device
        if ('ontouchstart' in window){
            // Apply the correct [touchscreen] body class
            $('body').removeClass('no-touch').addClass('touch');
            // Include the touch toggle to display text when tapped
            $('div.boxInner img').click(function(){
                $(this).closest('.boxInner').toggleClass('touchFocus');
            });
        }
    });
    </script>
    
</body>

htmlcssmodal-dialog

Answer №1

Unfortunately, HTML and CSS alone cannot achieve this task.

However, with JavaScript and considering you already have some jQuery code in place, I suggest using jQuery for this purpose. By adding the following section to your script, you can easily accomplish the desired functionality:

jQuery

var $video = $(".modalVideo video")[0];
$video.autoplay = false;

$("a[href='#linux-c-arm_video']").click(function(){
  $video.play();
});

$(".close").click(function(){
  $video.pause();
});

...

More videos

If you need to display multiple videos dynamically based on specific IDs upon clicking, follow these steps:

First, create a function called playVideo() outside of the page load function and exclude the video manipulation actions within it.

Function

function playVideo(id) {
  var $video = $(id + " video")[0];
  $video.autoplay = false;
  $video.play();

  $(".close").click(function() {
    $video.pause();
    $video.currentTime = 0;
  });
}

Ensure that the links containing video IDs trigger the playVideo() function by modifying your code accordingly:

$(".box a[href*='video']").click(function() {
  var id = $(this).attr("href");
  playVideo(id);
});

...

Answer №2

From my understanding, CSS does not have the capability to control the HTML video player. To start or stop a video when a modal is opened/closed, JavaScript is necessary.

To control the video using JavaScript, you can use the following code on modal open:

document.getElementById('videoId').play();

Answer №3

Changes to HTML

Take out the autoplay attribute from the video elements. The intention is for the video to play when the modal window opens, not when the page loads.

Adjustments in jQuery

Revise your jQuery code with the following modifications:

$(function(){
  // Determine if this is a touch-enabled device
  if ('ontouchstart' in window){
      // Assign the appropriate body class for touchscreen devices
      $('body').removeClass('no-touch').addClass('touch');
      // Apply touch toggle to display text on tap
      $('div.boxInner img').click(function(){
          $(this).closest('.boxInner').toggleClass('touchFocus');
      });
  }

  /////////////////////////
  // Updated section begins here
  /////////////////////////

  // Initiate video playback on click
    var playClickedVideo = function () {
        var videoId = $(this).attr('href');
        var video = $(videoId + ' video')[0];
        video.play();
    };

    $('.titleBox a').click(playClickedVideo);

    // Stop video playback upon clicking the close button
    var stopVideos = function () {
        $('video').each(function (i, video) {
            video.pause();
            video.currentTime = 0; // Rewind (optional)
        });
    };

    $('.close').click(stopVideos);

});

A demo showcasing the updated code can be viewed on CodePen: http://codepen.io/tinacious/pen/gLvwyy

To access the links and test functionality, some adjustments were made to the CSS. Therefore, only copy the revised jQuery portion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

Maintain line breaks in the scanner input within an HTML element

Currently, I am utilizing a Zebra DS9908 scanner to scan a barcode and transfer the data onto an HTML page. However, I am encountering an issue with preserving all input characters. Despite attempting both a <div> and <textarea>, the line feed ...

htmlbarcode-scannerzebra-scanners

Using jQuery to trigger a Bootstrap modal when a button is clicked

I've been attempting a simple task, but it appears to be unsuccessful. I'm trying to handle the click event of a button inside a bootstrap modal, and so far, nothing happens when clicking the button. My guess is that my jQuery selector for select ...

jqueryhtmlcsstwitter-bootstrap

Using Python and Selenium to Scroll Down the Page (with Two Separate Scrollbars)

I need help scrolling down the conversation section on Facebook Messenger. There are 2 scroll bars on the page, and I specifically want to scroll down scroll bar number 1 (see image) Click this link to access the page (make sure you are logged in and hav ...

pythonhtmlseleniumwebdriver

Ways to Toggle div Visibility for Elements with Identical Class Names on an Individual Basis

After searching for solutions on stackoverflow, I attempted to implement some answers provided by other users, but I'm still not achieving the desired outcome. In my website's about section, there are four different items. When a specific item&a ...

javascriptjqueryhtmlcss

Use CSS to configure the mouse wheel for horizontal scrolling

Looking to create a horizontal page layout, but when I scroll with the mouse wheel the content only moves vertically. Is there a way to enable horizontal scrolling using the mouse wheel? Does CSS have a property for this? For instance, is there something ...

htmlcssscrollmouse

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

javascriptjqueryhtmldatatables

"Enhance your code editing experience in Eclipse with HTML, CSS, and JavaScript syntax

Hi there! I'm looking for a way to enable syntax highlighting for HTML/CSS/JS in Eclipse. My main focus is on developing in Python using the PyDev package, but currently I am working on creating Cheetah templates which are difficult to read without pr ...

pythonhtmleclipsesyntaxcheetah

Summernote information embedded with HTML elements

I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...

javascripthtmlangularjssummernote

Creating a full-screen loading animation that appears when a button is clicked is a great way to enhance user experience. This animation can flow seamlessly from right to left before disappearing, providing a visually engaging transition for users as they

Despite anticipating more negative responses than positive ones, I believe that even one correct answer outweighs it all! So, I'm trying to figure out how to create a loading animation that covers the entire screen whenever a button on the navigation ...

javascripthtmlcssreactjsdom

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user

When the code below runs, it correctly generates a rectangle the same size as the canvas on start-up. However, an issue arises when the user clicks the button to generate a new canvas - the rectangle does not appear. Can someone please provide assistance ...

javascriptjqueryhtmlcanvas

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...

javascriptjquerycss

Clicking within the text activates the dropdown menu, but clicking outside the text does not

My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...

javascriptphpjqueryhtmlcss

Incorporate multipart data into your HTML form for increased versatility and

Can HTML form input values be set as multipart data? I am attempting to prepare an image for upload while submitting an HTML form (the desired remote image data is generated by PHP). For example: <form action="http://remote_site.com" method="post" en ...

phphtmlformsmultipartform-data

Angular - ui-router states are not being detected

I'm currently working on a Spring and Angular JS web application project. The structure of the project is as follows: app.state.js (function() { 'use strict'; angular .module('ftnApp') .config(stateConfig); stateConfig. ...

javascripthtmlangularjsangular-ui-router

Unique border-bottom width measurements available

Seeking assistance with a design challenge, further details are available in the screenshot I've provided. I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length. ...

htmlcss

Position the div element below the navigation bar

I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...

csssails.js

Rotation of Weekly Menus

I have a project to enhance our Menu Order Website by adding a weekly rotating menu feature. I have completed the entire website, including the admin panels, but I am struggling to implement the rotating menu functionality. Currently, all menus are include ...

phpcss

Adapting Classes in Javascript Based on Screen Width: A Step-by-Step Guide

I'm dealing with two separate menus - one for mobile version and one for PC version. However, the mobile menu seems to be overlapping/blocking the PC menu. How can I resolve this issue? I've attempted various solutions such as removing the mobil ...

javascripthtmlcss