How to make text and video flow together

Question

I have a very specific question and I'm not sure if you can do what I want with css. For what I saw on other posts, this may be outside the scope, but I thought I would ask if there would be css geniuses there. I want to achieve a very specific behavior. I have a column of text, and some words in this column are highlighted. When you click on a word, I want the text to split and the video to go up.

my html is simple:

<p>text<span id="clickable" class="link">highlighted text</span>. <div class="closed"> <video id="video" width="100%"> <source src="myVideo.mp4" type="video/mp4"> </video> </div>text</p> 

css contains a class closed (with height 0) and a class open with a certain height

CSS

 .closed { overflow: hidden; height: 0px; transition-property: all; transition-duration: 2s; transition-timing-function: ease-in-out; } .open { height: 11.4vw; } 

js applies the class to the opening when the text is clicked and plays the video, everything is very straight forward

Javascript

 $(document).ready(function() { $("#clickable").click(function() { var vid = document.getElementById("video"); var closed = $('.closed'); if(closed.hasClass("open")) { closed.removeClass('open'); vid.pause(); } else { closed.addClass('open'); vid.play(); } }); }); 

Everything works. But here's the thing, and I know that I'm picky, so I'm not sure if css can do this. The problem is that the text immediately after clicking the "clickable" button goes to the next line. I want this not to be done in a way that disrupts the reading. I know this is because the div in which I have my video is a block element. But if I change the tag to make it span (I know heresy), like this:

  <span class="closed"> <video id="video" width="100%"> <source src="myVideo.mp4" type="video/mp4"> </video> </span> 

video refuses to follow

 overflow: hidden; 

and just does not hide from the sight, which is the whole point of what I'm trying to do. Adding

 display: inline-block; 

the div does not do this. I experimented with some floats, but I get erratic behavior in Chrome. So my ideas are running out. I want the video to work as an inline element. Maybe someone will just relieve me of my suffering and say that it is impossible to do so that I can move on. Thank you for your time.

----------------------------------------------- --- -------------- EDIT -------------------------------- --- --------------------------

Here is an example of my project. This is with the “div” option, and it works the way I want, except that, as I said, after the video text goes to the next line that I don't want.

GIF:

Answer 1

Paragraph (p) element must not have a div element. This causes the paragraph to close at that point, even if display: none set to div. You can see this behavior if you test the DOM with the F12 tool and find more information on this in this post .

You can replace the div with a range to avoid line breaks, set display: none when the video is hidden, and switch to display: block when the video is shown.

When the video becomes visible, a line break appears in the text. One solution to this problem is to dynamically place the video at the end of the line. This can be done by taking part of the text following the video and moving it inside the span in front of the video.

These suggestions are implemented in this jsfiddle . You can change the width of the container to check the behavior.

HTML:

 <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <span id="clickable" class="link">ullamco</span> <span id="spanBefore"></span> <span id="spanVideo" class="closed"> <video id="video" width="100%"> <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4"> </video> </span> <span id="spanAfter">laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> </p> </div> 

CSS

 #spanVideo { overflow: hidden; transition-property: height; transition-duration: 2s; transition-timing-function: ease-in-out; } .closed { display: none; } .open1 { display: block; height: 0vw; } .open2 { height: 65vw; } .link { background-color: yellow; cursor: pointer; } 

Javascript Code:

 var $spanVideo = $("#spanVideo"); function setVideoPosition() { var $spanClickable = $("#clickable"); var $spanBefore = $("#spanBefore"); var $spanAfter = $("#spanAfter"); $spanAfter.text($spanBefore.text() + $spanAfter.text()); $spanBefore.text(""); var yBefore = $spanClickable.offset().top; var words = $spanAfter.text().split(/(\s)/); while ($spanAfter.offset().top <= yBefore && words.length > 0) { $spanBefore.text($spanBefore.text() + words.shift()); $spanAfter.text(words.join("")); } } $("#clickable").click(function () { var video = document.getElementById("video"); if ($spanVideo.hasClass("closed")) { setVideoPosition(); $spanVideo.toggleClass("closed").toggleClass("open1"); setTimeout(function () { $spanVideo.toggleClass("open2"); video.play(); }, 50); } else { video.pause(); $spanVideo.toggleClass("open2"); setTimeout(function () { $spanVideo.toggleClass("open1").toggleClass("closed"); }, 2000); } }); 

Answer 2

Is that what you were after?

• The alleged #clickable is text (not in OP code). Made it in the .clickable class, since there seems to be no advantage to having it as id.

• Added a neutral .frame class to span.closed , and then changed span.frame.closed to div.frame.closed and added display:inline-block to it.

• JQuery has been modified so that the .opened and .closed state classes alternate evenly when switching to div.frame .

• Added transitions to both states on div.frame and video#video . video#video behaves correctly in the open state, but in the closed state it is still cool, we will leave this task open for the OP.

• Added float to div.frame.opened and all p aragraphs and it is expected that the text will div.frame.opened around div.frame.opened . Floats are fickle, flexbox is the best alternative. Did not use flexbox due to time.

SNIPPET

 $(document).ready(function() { $(".clickable").click(function() { var vid = document.getElementById("video"); var frame = $(this).next(".frame"); if (frame.hasClass("opened")) { vid.pause(); frame.removeClass('opened').addClass('closed');; } else { frame.addClass('opened').removeClass('closed'); vid.play(); } }); }); 

 .closed { overflow: hidden; height: 0px; transition-property: all; transition-duration: 2s; transition-timing-function: ease-in-out; } .closed #video { opacity: .3; height: 0px; transition-property: all; transition-duration: 2s; transition-timing-function: ease-in-out; } .opened { height: 190px; transition-property: all; transition-duration: 2s; transition-timing-function: ease-in-out; float: left; display: inline-block; } .opened #video { opacity: 1; height: 190px; transition-property: all; transition-duration: 2s; transition-timing-function: ease-in-out; } p { float: right; margin: 5px 0; } .clickable { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="clickable">Attack of opportunity bolster undead class darkness ethereal plane grab infection inflict spell initiative modifier movement modes natural armor bonus paladin plant domain plant type sonic attack spell failure staggered suppress surprise tiny.</p> <div class="frame closed"> <video id="video" width="50%" controls=""> <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4"> </video> </div> <p>5-foot step charm subschool class level coup de grace creation subschool critical hit massive damage natural nauseated paladin</p> 

Answer 3

After reading your edit, I made this code that might help use zer00ne video

JQuery

 $(document).ready(function() { $("#text").on('click', function(event) { $("#video").slideToggle(400); }); }); 

Css

  #video { width: 25vw; height: 25vh; display: none; position: absolute; z-index: 100; } 

HTML

 <p id="text"><a href="#"> Click me Click meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick me </a> </p> <video id="video" controls=""> <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4"> </video> Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. </p> 

I basically add the position of the absolute and then used jquery to show the video, hope that helps

You can see it here https://jsfiddle.net/nbkn6u3d/