Adding a phone frame mockup to an embedded video - javascript

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)

Related

Tumblr unwanted padding in upload video and audio

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.

Embed HTML5 games in iframe with ability to switch to full screen mode on different domain

I'm trying to enable full screen support for a game embedded from archive.org.
Example of embed code is:
<iframe src="https://archive.org/embed/DukeNukem" width="560" height="384" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
Full screen mode is available on the archive.org game page itself - see the actual game page and full screen button (upper right):
https://archive.org/details/DukeNukem
What I would like to have is the ability to switch the embedded iframe and game canvas to full screen mode from a remote website.
I have tried various Javascript and have been able to make the iframe go into full screen mode, but the game canvas itself stays the same size with each of js implementation I have tried resulting in large full screen iframe with small game viewport and lots of black space. If possible, I would like the actual game canvas to resize similar to how the full screen button works on archive.org.
I was hoping to find a creative way to be able to enable full screen mode on a different domain with the embedded html5 iframe game.
I think it may be possible with using Adobe Flash, but would prefer to avoid Flash if possible since support is getting faded out everywhere. Another thought I had was to actually zoom the users browser to the original game canvas size with a button press to get the user in a quasi-full-screen mode. Since the resolution of this game is so low anyways, I don't think it would result in much loss of graphic quality. Just not sure of the code to actually make this zoomed, quasi-full-screen mode possible to dynamically resize to users screen size and center on the iframe / game canvas. Of course is there is a better way, you can think of to enable full screen mode on the embed, I would love to hear your creative ideas!
Thank you in advance for your help - it is most appreciated!! If nothing else, my question will let you experience a bit of nostalgia if you are old enough to remember Duke Nukem!!
//try this peace of code
//do not forget to change the src in the iframe tag
<html>
<head>
<title>full screen iframe</title>
<style type="text/css">
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<iframe src="" frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

Safari(iOS): Embed YouTube Video Always Plays In Low Quality

I need to play YouTube Videos with at least 720p resolution on my mobile tv web app, but safari plays them always with the lowest quality, that sucks.
I tried a lot of solutions that have been already posted, but they seem to be outdated. e.g. &vq=hd720, &hd=1, &vq=hd1080 appending to the embed iframe, unfortunately it's not working.
I also tried to do it with the youtube javascript api, what a surprise, no luck either.
Any other solutions I could try? The Videos are uploaded in portrait format 720x1280.
I ran into these exact same issues today and ultimately came up with a bit of a hack that worked for my specific needs. The trick is to double the size of one of the parent elements that's wrapping the iframe embed and then to scale it down again using a transform. For example:
.video-wrap {
width: 200%;
transform: scale(0.5);
transform-origin: left top;
}
Alternatively, you can also specify an exact width/height for it if you're trying to get exactly 360, 720, 1080, etc.
The only major downside to this "solution" is that it will also scale down the whole video player UI. In my case this was acceptable because there are other UI elements that allow the user to control the video.
I'm also only applying these styles to smaller screens based on css breakpoints, because the larger screens pull in the right resolution video regardless.
I really hope YouTube will eventually fix their setPlaybackQuality function, but in the mean time, I hope this helps someone out.

Youtube iframe not responding to clicks passed through image above with pointer-events: none

http://jsfiddle.net/aintnobody/0L1yumpe/
vs the same code on
http://www.aintnobodymusic.com/monkey
The issue: On the fiddle, everything works as it should. The image above in all cases is ignored via pointer-events: none, and the click passes through to whatever is underneath. We can tell this via the event listener for the bottom two, and since the top 4 are youtube iframe embeds, we can tell because the click starts the video (these are live vids, btw, so be sure to click in the center or you may be taken to youtube).
So, all is well... until I put it up on a site. I've tried four times in both local and hosted environments, and I always get the same result: The bottom two behave as expected, and the click goes through the image to the div below. However, the iframe (youtube) does not register the click IF 100% of it's pixels are covered by the image above. If even one pixel is exposed, it clicks through as it should. This is why the "short" set is there. The images above those videos are exactly one pixel narrower than the video underneath.
In firefox,however, the videos that are 100% covered will not trigger. It works fine in Chrome and Safari that I have tested so far, but not in firefox.
I can't find a single mention of this issue anywhere.
I've done test after test to narrow down what is happening here.
Is this a youtube issue? A firefox issue? An iframe issue? Could it have to do with the lack of an origin tag on the iframe? Perhaps some difference in the configuration of my document's head vs fiddle? I've tried similar on codepen as well, and it works just fine (clicks pass through)... until I put it up on a site and use firefox.
edited to add: just did simplified case on codepen as well, and clicks go through just fine on there, but not when I host:
http://codepen.io/oompaLoompa/pen/QwqRER
<iframe
class="video full jpgOverVideoFull"
width="200"
height="150"
src="https://www.youtube.com/embed/DEzREJbln-o"
frameborder="0"
allowfullscreen>
</iframe>
<div class="image full jpgOverVideoFull"
style="background-image:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/247/cache/proboscis-monkey-in-tree_24704_600x450.jpg');"
>jpg full vid</div>
<iframe
class="video full pngOverVideoFull"
width="200"
height="150"
src="https://www.youtube.com/embed/DEzREJbln-o"
frameborder="0"
allowfullscreen>
</iframe>
<div class="image full pngOverVideoFull"
style="background-image:url('http://www.whaleoil.co.nz/wp-content/uploads/2012/05/monkey.png');"
>png full vid</div>
and the css:
.video, .image, {
height:150px;
position: absolute;
font-size:30px;
color:#F2F;
text-align: center;
}
.image {
z-index:1;
pointer-events: none;
background-size: cover;
}
.jpgOverVideoFull {
top:20px;
left:20px;
}
.pngOverVideoFull {
top:190px;
left:20px;
}
.full {
width:200px;
}
.short {
width:199px;
}
Since no one else is offering any input, I'll offer thee best I've been able to find in the hopes that it might be helpful to someone else, or that someone might pick up from here and run with it. The following is at least A solution, though I wouldn't call it THE solution:
The iframe will not trigger if it is completely opaque in front. One blank pixel will do, or a less than opaque image. It has nothing to do with image type. Could be background color. It it is fully opaque, and covers every pixel, pointer-events: none will not work.
So, only solution I've found is to either leave a tiny portion uncovered (looks bad), or make semi-transparent (extra processing). Since this seems so far to only be an issue in Firefox, I tried using css of:
opacity: 1;
-moz-opacity: .9899;
hoping that it would render as fully opaque everywhere else, but then do translucent in ff only. Unfortunately, my version is higher than whichever requires prefix, and it takes the unprefixed version and ignores prefix.
(the .9899 is because it does not work at opacity of .99 or above although I'm not sure how many digits are either practical or actually used)
so, since I don't want it translucent if it doesn't have to be, best I've been able to figure (without needlessly slowing down other browsers) is:
#-moz-document url-prefix() {
#elementId {
-moz-opacity: .9899;
opacity: .9899;
}
}
It works, but it makes me cringe. It makes me wonder what other browser quirks may be around the corner that I haven't been able to test for yet like older IT, Opera Mini, etc. Mainly, I don't like it because it doesn't answer the larger question: WHY does a fully opaque div over a yt iframe click-through with pointer-events: none in EVERY fiddle, pen, etc, but then NOT click-through on site (hosted or local)
There is another and probably more important distinction to be had there. Please chime in if you have any clue as to what that might be.

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