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

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

htmlcssflexbox

Preventing users from copying and pasting information from my form by implementing javascript restrictions

I'm looking for a solution to prevent users from copying and pasting in my form using JavaScript. I want to restrict the ability to paste or copy any content into the form. Any assistance would be greatly appreciated! ...

javascripthtml

problem with css3 webkit transform rotation

After using jQuery to append my signpost div to the DOM, I encountered an issue where its width and height were not being affected by webkit transforms. When I removed the transforms, the div displayed correctly. My goal is to append the div and then anima ...

jquerycsstransformrotatetransform

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...

htmlcssangular

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

Issue with Vue2: DIV does not adjust height when using v-for loop

I have a div set up like: <div class="pt-4"> <h5>Genres:</h5> <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index"> <span v-if="index < ...

cssvue.js

What is the process for adding color to HTML elements?

Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...

htmlcssreactjs

ClickEvent (or element selector) is experiencing functionality issues

I'm currently working on creating a small calculator using HTML, CSS, and JS. However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code: `< ...

javascripthtmlcssevents

Is it possible to dynamically alter the text and contrast of your entire website?

In the realm of MVC 4 and Visual Studio 2013: I am pondering over how to dynamically change the text on my website with the simple click of a button. The same goes for adjusting contrast. Are there any plugins or techniques that could facilitate this proc ...

htmlcssfont-size

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

javascriptjquerycss

The vanishing act: Semantic UI menu disappears when you click

My objective is to create a persistent left-side menu using Semantic-UI. I want to implement two different states for the menu - one with text for each item and another with an image for each item. However, I am facing some challenges that have me complete ...

javascriptjqueryhtmlcsssemantic-ui

How to modify the link to ensure that a particular tab is already selected when the page loads

How to Add Script for Linking to Rawdata Tab I need help loading specific page content with the Rawdata tab open instead of the Summary tab. What code should I add to the link to ensure that the page loads with "Rawdata"? https://i.stack.imgur.com/avETs. ...

htmlangularjshyperlinkangular-ui-bootstrap

How can I delete a video on mobile in WordPress?

Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it proper ...

htmlcsswordpresswoocommerce

Implement a sequence of animations within a div using jQuery

My goal is to create an animation effect for each div element within a row when the user scrolls down to that specific point on the page. The layout consists of three <div> elements in the same row. The structure of the HTML code is as shown below: ...

javascriptjqueryhtmlanimation

Tips for displaying and concealing columns in Blazor QuickGrid based on breakpoints

I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding Class="d-sm-none d-md-block" to the QuickGrid component's PropertyColumn, it seems that the Bootstra ...

cssblazorquickgrid

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

javascriptjqueryhtmlcssjquery-isotope

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

What is causing Firefox to consistently shave off 1px from the border of table cells?

Why is Firefox removing 1px from the border's value as defined in the CSS file? .aprovGriditem th { border-collapse: collapse; border: 4px solid #BBC6E3; padding: 0; } UPDATE <table cellpadding="0" cellspacing = "1" runat="server" id= ...

htmlcssfirefoxhtml-table

Adjust the dimensions of the canvas without disrupting the existing artwork

I am currently working on a pixel art application where I am facing an issue with saving images from the canvas. The saved image appears small and pixelated when I try to resize it. I would like to resize the image to larger dimensions, but I am unsure of ...

javascripthtmlcsscanvas

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

javascriptcsshtml