We Keep Coding

How can I show only a section of a video frame with CSS or JavaScript?

I want to show only part of the video frame for a given video. Let me explain what I mean with examples:
I have a wide screen video (852 x 480) but I want to display it as a full screen video (640 x 480) by using CSS or JavaScript to imitate cropping it. The video file doesn't change; the script just hides the pixels at the sides.
I have a non-standard sized video that is a custom mix of two 640 x 480 video side-by-side, so it is 1280 x 480 in total size. Without having to edit the video, I would like to imitate having two videos play simultaneously on a page, but it will be from this single source video. I would like to make two video elements 640 x 480 and one focuses on the part to the left and the other focuses to the part on the right on the 1280 original video source.
I imagine setting properties like top and left to designate the start point for the video, then setting properties like bottom and right or height and width to designate how wide and high the video will will be shown from the start point.
I would very much prefer a CSS only solution. I doubt one exists however. I am okay with javascript/jquery. I have an idea based on the solution in this answer, but that seems a bit on the hack side of things. Basically, I could make a div the size that I want the video, relatively position it and set overflow to hidden. Then I would put the video element inside the div and absolutely position that so that the parts I want displayed are seen in the div, but the other parts overflow and are hidden. That does have the benefit of not needing javascript, but I would prefer to use real properties if they exists and no added HTML.
Here's some images to show what I want to accomplish, but do not know of any non-hack solution. The white part would be the size of the video frame and what is shown to the user. The gray part is what is hidden.
Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480.
Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480.
Video frame is 640 x 480 starting at top and 106 pixels from the left. The source is 852 x 480.
Video frame is 320 x 240 starting at 140 pixels from the top and 212 pixels from the left. The source is 852 x 480.

You can use CSS's clip-path property to display the section of the video.
You'll need to define inline svg clipPath element, add a path element with co-ordinates, give the clipPaths the ids and use them in your CSS to clip the video(clip-path: url(#id)).
Fiddle
HTML:
<iframe id="clip-1" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-2" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-3" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-4" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<svg>
<defs>
<!-- Co-ordinates for the first image in your question -->
<clipPath id="one">
<path d="M0,0 L640,0 L640,480 L0,480z" />
</clipPath>
<!-- Co-ordinates for the second image in your question -->
<clipPath id="two">
<path d="M212,0 L852,0 L852,480 L212,480z" />
</clipPath>
<!-- Co-ordinates for the third image in your question -->
<clipPath id="three">
<path d="M106,0 746,0 746,480 106,480z" />
</clipPath>
<!-- Co-ordinates for the fourth image in your question -->
<clipPath id="four">
<path d="M212,140 532,140 532,380 212,380z" />
</clipPath>
</defs>
</svg>
CSS:
#clip-1 {
position: absolute;
-webkit-clip-path: url(#one);
clip-path: url(#one);
}
#clip-2 {
position: absolute;
top: 480px;
-webkit-clip-path: url(#two);
clip-path: url(#two);
}
#clip-3 {
position: absolute;
top: 960px;
-webkit-clip-path: url(#three);
clip-path: url(#three);
}
#clip-4 {
position: absolute;
top: 1440px;
-webkit-clip-path: url(#four);
clip-path: url(#four);
}
body {
margin: 0 auto;
}

I decided to go with the "hack" solution that I mentioned in the question. I was able to design it exactly as described, but if your selected portion of the video does not include the controls then you will have to make custom controls and design them to fit in the the selected portion. I did this with video.js.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="http://vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.10/video.js"></script>
<style type="text/css">
.clipvid {
position: relative;
width: 640px;
height: 480px;
overflow: hidden;
}
.clippedvid {
position: absolute;
top: 0;
left: -106px;
}
/* This is from the css for video.js. I had to make these changes.*/
.vjs-default-skin .vjs-control-bar {
width: 75%;
left: 12.5%;
}
</style>
</head>
<body>
<div class="clipvid">
<video class="clippedvid video-js vjs-default-skin" width="852px" height="480px" controls autoplay data-setup="{}">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<video class="video-js vjs-default-skin" width="852px" height="480px" controls data-setup="{}">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
It works well enough, but it seems that at least FF and Chrome will download the video once for each element, even though they call the exact same source file? This means in a setup where one page uses the same source video in two video separate elements, that source video will be downloaded twice. Clearly two temp files would be a waste of bandwidth. This might be cause to scrap this solution and come up with something else.

How to manipulate svg foreign object html text wrapping and positioning? [duplicate]

This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
So I'm making a photo frame designer. Instead of a fiddle have the website as it's so much easier. Here it is.
Basically on the text input it prints the text to the SVG frame which uses an embedded foreign object tag so I can access it's auto text wrap. The problem comes with the positioning of the text. When the words are on two lines the positioning is correct. However whilst on a single line, the text is too high. I need it to be center between the photo slots and the bottom of the frame. This can be done easily by adjusting the foreign object's "y" value. However this then causes the two line text to be two low and out of position. I have no idea how I can fix this. Perhaps jQuery or javascript? Thanks.
The code:
<foreignObject x="78" y="460" width="1100" height="220" style="color:white;text-align:center">
<body xmlns="http://www.w3.org/1999/xhtml">
<p id="text">Your words here</p>
</body>
</foreignObject>

To prove my point, below is a sample, using one of the techniques from the suggested duplicate question page.
<svg width="500" height="200">
<rect x="0" y="0" width="500" height="200" fill="orange"/>
<foreignObject x="0" y="0" width="500" height="200">
<style>
div { display: table; font-size: 60px; width: 500px; height: 200px; }
p { display: table-cell; text-align: center; vertical-align: middle; }
</style>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<p id="text">Your words here</p>
</div>
</body>
</foreignObject>
</svg>
If you add more text to the <p> element, the text will remain centred.
For example, here is a demo with two SVGs, the only difference between them is the length of the text paragraph.

Two svgs next to each other horizontally

Is it possible to have multiple SVGs that are next to each other horizontally. I know that when you append a SVG in D3, it appends in below the previous SVG. But now I have the previous SVG on half the page, and I want to translate this SVG from below the previous SVG to the right of the previous SVG. I tried using the transform-->translate attribute on the second svg but it did not work:
var secondSVG= d3.select("#div1").append("svg").attr("width",960).attr("transform"),"translate(500, -500)");

In Chrome 24, IE10, and FF17 this jsFiddle worked as expected. The key seemed to be setting the width and height stylesheet properties.
HTML:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg2">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
CSS:
svg
{
width: 190px;
height: 190px;
}

Awhile back I wanted to do something similar, but I eventually settled on using a single svg element with two internal g elements, one of them transformed to the right. You can see the eventual finished product here.

General idea: Wrap each SVG in a div element that is displayed as inline-block.
This works with the following approach that I personally like anyway.
Set the width and height attributes of the SVGs to 100%.
"Inner impact": Specify the size of the drawing area (which the units of the elements in the SVGs, like circle, relate to) with the viewBox attribute; this typically goes together with the preserveAspectRatio attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
"Outer impact": The SVGs will adapt to the size of their container. Style it (width and/or height) according to your wishes. Of course you need enough horizontal space.
Minimal example:
<div style="display: inline-block; width: 42%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet">
<circle cx="0" cy="0" r="39">
</svg>
</div>
<!-- Just a copy from above. Right of (not below) the previous SVG. -->
<div style="display: inline-block; width: 42%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet">
<circle cx="0" cy="0" r="39">
</svg>
</div>

Create a small color box in html

I have a li element. Inside the li element there are many elements like input, labels.
I want to put now a small color inside each li. The color will be provided dynamically. I want to have something square and on page load it fills with the color i provide. Is there something already existing?

Are you looking for something like this?
HTML
<div class="input-color">
<input type="text" value="Orange" />
<div class="color-box" style="background-color: #FF850A;"></div>
<!-- Replace "#FF850A" to change the color -->
</div>
CSS
.input-color {
position: relative;
}
.input-color input {
padding-left: 20px;
}
.input-color .color-box {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 5px;
top: 5px;
}
See jsFiddle for live example.

Disclaimer: I'm not familiar with CSS.
I became annoyed with nuances of CSS and not getting the look and feel quite right and figuring out different configurations of div's. I stumbled on to something much simpler (to me and hopefully others): use SVG.
Here's an example of a yellow-box:
<html>
Look at me - I'm a yellow box!
<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</html>
When used with a jinja template I can configure the fill color by supplying the correct string from python:
<svg width="20" height="20">
<rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
It's old school, but it's simple and gets the job done.

jQuery cycle plugin with only one image

This is a bit strange question but I am trying to use the cycle plugin to display only one image. That is just to use the various effects the plugin is providing. I have a row of images with certain text and each image/text will be hosted inside a div tag which will be enclosed by the cycle plugin. At certain times, different div tag will have some animation effect using the plugin's cycle function. I think I can add the same div tag to work around this but I am wondering if anyone knows how to do what I want to do.

If you're trying to cycle between DIVs that have the same image but different text then, yes, you can do that. Here's a basic example.
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<style type="text/css">
.slideshow { position: relative }
.slideshow div { position: relative; }
.slideshow div span { position: absolute; top: 5px; left: 5px; }
</style>
<div class="slideshow">
<div>
<span>Here's some text!</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Some more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Even more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
</div>