Tumblr unwanted padding in upload video and audio - javascript

Editing this tumblr theme, i tried every kind of post and realize that when I upload an audio track or a video clip, the caption text has a huge padding, and it dosn't happen with embed videos or music.
I tried changing padding and margin in all posible places but doesn't do anything. Don't know where else to look at, so i leave the code with my changes.
This is my tumblr, i've made some changes https://liquidacolectiva.tumblr.com/

In the block that looks like
article img, article iframe, article object {
width: 100%;
height: auto;
color: rgb(255,255,255);
}
You can remove the height: auto line. The Tumblr media player was becoming bigger than it should because of that.

Related

Adding a phone frame mockup to an embedded video

I hope you can help. I'm basically looking for a way to intigrate some videos into my Wordpress blog and don't know where to start. The videos were shot vertically for Instagram, and I want to show them vertically in a phone frame. hand holding phone
I tried uploading a five second video of me laughing about some dogs sitting in the drivers seat of a parked car but it was 15MB and wouldn't even play, so I reckon my best bet would be using unlisted Youtube videos and embedding them. This is the video, it really tickled me. dogs in scotland pretending to drive car, very important
Basically what I'm asking is whether there's a way to add a border or a frame to a vertical video, and would anybody be able to point me in the right direction for any relevent code if so?
Cheers in advance :)
I've tried adding a frame using Final Cut and Photoshop, but I have hundreds of short ridiculous videos and was hoping there would be a way I could automatically add a frame using code each time I embed a Youtube video. I will be resuming my walk around the coast of Britain soon and won't have access to my laptop for the next year so if there was some code I could copy and paste each time that would be ideal.
You could use an structure like this one:
HTML
<div class="wrapper">
<img src="./assest/phone-frame.png" />
<video scr="./assets/video.mp4" />
</div>
CSS
.wrapper {
position: relative;
height: 700px;
}
.wrapper img {
position: absolute;
height: 100%;
z-index: 2;
}
.wrapper video {
position: absolute;
height: 100%;
z-index: 1;
}
You just need to adjust the position of the img and video to make them match using the top and left properties (or right and bottom, whichever you fancy)

Html <div> Dynamic sizing, annoying behavior

I am fairly new to web development and I have the following in HTML:
<div id="map" style='width: 97vw; height: 76vh;
max-width:100%;
max-height:100%;
left: 0px;
top: 0px;
border-radius: 6px 6px 6px 6px;'></div>
I was trying to make div section automatically adjust itself as discussed many times before and using vw, vh seemed like the simplest solution here.
However when I stretch the width of the page, I get 'jumps', it don't auto adjust itself continuously.
This is before stretching:
This is just after stretching a little:
I am trying to keep the code clean, therefore it would be best if I can solve this using only html (yet I would still use javascript, css etc. if they provide faster/better solutions).
My goal is to have this map always ending from say 10px before the end of the entire screen, and adjust its size continuously when user stretches the page. What would be the best way to do this?
Note: I am aware similar subjects has been discussed several times before and I went through their content. However I don't think this is a duplicate because I am more concerned with the details such as 'jumps' as described in images, and I want to have a specific ending relative to end of the screen rather than just filling the page or having a ratio of it.

CSS Blur trouble with IE 11 - workaround?

I am writing a responsive web page using a blur filter to full screen blur an image. It is a big image and I use it as background. The point is, I use it as background as a CSS background.
E.g. I don't use
<img src etc.
I use the css property background. This gives me the advantage of using background-size for the responsive layouts. E.g. cutting off edges for mobile devices, and automatic shrinking, depending on landscape and portrait too.
This would be a lot of work, to do by hand.
Problem is, sadly, IE. Internet explorer 11 does not offer a way to use css blurring.
EDIT as mentioned in the comments, I could just blur the image myself in photoshop and am done.
The problem is, for lower resolutions I need different blur levels. If the screen size is 600x400 I cannot use the same blur that I was using for 1920x1200. So I have to blur ALL background images I have for ALL resolutions I am using. Then implement a loading Technic to only load the images that are needed. There are many background images. Around 50 total. New ones should be able to be added by the customer as well. I really don't see me making him do this process.
I read about:
StackBlur
But I can't seem to get it working.
What I tried in a codepen so far
HTML
<canvas id="canv" ></canvas>
CSS
canvas {
width: 100px;
height: 100px;
border: 10px #c0272b outset;
box-shadow: 0px 0px 12px 2px #333;
cursor: default !important;
background: url('data:image/jpeg;base64,...') center center no-repeat;
}
JS
stackBlurCanvasRGB( "canv", 0, 0, 100, 100, 5 );
as a reference the codepen i stole the image from

How to overlay another div on the video?

I am currently developing an samsung smart tv app using the sdk 3.5.2 (as required)
I am using the SEF plugin and with setDisplayArea(), I am able to display a full screen video.
But now I am facing problem that I would like to overlay 2 divs, a header and a footer, on top of the video, but I could not have it done correctly.
What have I tried and got is desribed as follow:
In my html, I have include the plugin, and got the player object z-index and position set
<object id="pluginPlayer" border=0 classid="clsid:SAMSUNG-INFOLINK-PLAYER"
style="position:absolute;z-index:10;left:0px;top:0px;width:1280px;height:720px;"></object>
<object id="pluginAudio" border=0 classid="clsid:SAMSUNG-INFOLINK-AUDIO"></object>
<object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>
In my css, I have set the z-index of the header div
#SplashHeader{
position: absolute;
top:0px;
left:0px;
height:40px;
width: 1280px;
background: grey;
z-index: 100;
}
In my Js, I have called the setdisplayarea()
this.plugin.SetDisplayArea(0, 0, 960, 540);
(To sidetrack, here's another question I do not quite understand as the API states the width and height parameter of this function must not exceed 960 * 540, but I am currently developing for a 1280 * 720 machine...so I do not know is it correct to set it 960 * 540)
And I got the header shown successfully, however the video itself auto-scale and show below the header, which is not quite follow my expectation.
(I expect the video still be shown full screen with a header show on top of it, but not make the video auto-scale and shrink vertically..)
Anyone can give me advice? Thanks!
The SEF player is located in the most back of display layers so you don't need to specify any z-index there. Also if possible please don't use z-index more than 99 in Samsung TV Apps, some resources said that 100 and above are used for Samsung native display such as IME and Popup.
And for video display on 1280x720 resolution is a bit tricky. The video display is always full screen on 960x540 whether you're using 720p or 540p mode. The video will be stretched to 1280 from 960 or the ratio is 0.75. If you want to display width of video for 640x720 pixel then the size of video is 480x540.
Last advice:
call setdisplayarea again after play function
do test on real device (emulator sometimes lie on video display)

Really cool javascript or CSS feature in website

Does anybody know how the eyeball in this website is designed? Is this javascript (jQuery perhaps), or simply HTML5 and CSS? I just don't really understand how you get a little image in that shape, get it's onhover method, set a new picture, and then make it clickable. Is this a button?
http://animalvfx.com/work/
They use one image as the background (found here: http://animalvfx.com/images/bg-open-close.png).
They are only using CSS, they have a hover state on the class that sets the background position to a negative offset.
Basically the styles are:
.slide-holder .opener {
width: 30px;
height: 38px;
overflow: hidden;
position: absolute;
bottom: -38px;
background: url(../images/bg-open-close.png) no-repeat;
}
.opener:hover {
background-position: 0 -76px;
}
Effectively you are only seeing one part of the background image at a time. Because the image states are similar, it appears to be looking up.
The click event of the eye is using jQuery slidedown
If you want to find out how things work yourself, you can use the developer console in most popular web browsers. Then use the HTML inspector tool to inspect the element you are interested in.
Developers consoles are usually activated by pressing F12. This works in any decent modern web browser (and Firefox with Firebug)
It is a sprite - http://animalvfx.com/images/bg-open-close.png - on hover the background image is shifted from the centered eyeball to the offset one.
.opener:hover {
background-position: 0 -76px;
}
I believe he compressed his javascript so its not legible to the human eye but I believe he uses a combination of jquery/javascript, and css3. The hover where the eye changes its appearance I believe is just some simple javascript to change the image when hovered over. I know for sure a toggle class is being used when you click the eye because you can see the class change on the list in the HTML source (it originally is set to display: none). This definitely seems like the work of slideDown from jQuery. Hope this helps :]

Categories

Resources