Fake play button over youtube red play button - css

My site has embedded black and white youtube trailers and excerpts from classic movies. How do I hide the youtube red button for playback with my counterfeit one, say black, gray or silver/metallic? Keep in mind that I do not want to remove the red button, just hide it with my fake, so when I click on my fake button, actually I click the red button. The main purpose of not being able to see is to not uglify my site, which is entirely black and white stylistically. ...And, something else very important - if you can avoid the youtube API because it slows down my site. Thank you!!!

Well you can't replace the original button, but there's a workaround.
I have to credit #TomDoodler for this answer.
So:
Hide the player
Get the thumbnail like described here and put it in your page at the same position and size of the player
Put your own play icon over the thumbnail
When your play icon gets clicked, hide the thumbnail and your play icon, show the player and use the YouTube API like in your link to start the video
And here's the fiddle to this
// fiddles have to be accompanied by code, so here's some code

Related

Transparent-Background-Png in Foreground does not retain background Transparency in Angular Component

So basically I'm creating a landing page and I want to use this nice picture of clouds with transparent background overlayed on top of a nice landscape so they can scroll up.
The issue is that the image(which indeed has a transparent background) does not have a transparent background when I put it in the application.
here's an image of what it comes out looking like:
html:
<img src="assets/img/tryClouds.png" alt="Clouds" class="clouds">
scss:
.clouds{
position:absolute;
background:transparent;
width:100%;
height:30vh;
top:35vh;
z-index:24;
}
any help that works would make me your biggest fan for all of life!! :D <333333333
I will owe you a life debt, Zaalbar KOTOR style.
Answer: Found.
Tools: Adobe Illustrator with .ebs files.
Actual problem: nothing to do with css, js, or angular
some files claiming "transparent" backgrounds, actually had a checkerboard background imitating a transparent background. These files were downloaded from a stock image supplier I pay a monthly subscription fee to use. I figured out how to make use of these excellent images that baffled me and tricked me!
Resolution:
Use adobe illustrator(I know, costs money, but great tool for this sort of thing and possibly the only option from what I've read)
Open the .ebs (vector) photo in illustrator.
Now here's where I was mistaken. I would "export as", choose png, then select "transparent" for background.
The issue is that the image itself was actually permeated with this imposter checkerboard. D:<
Now, it's basically impossible to select and delete each piece of this imposter ( |:< )"transparent" background with something as whispy as clouds!
Thankfully, if it's a good quality vector, the background will be contained in a layer.
Click the layer for the background then click the upper right button circled in the screenshot and select "delete".
Now you're goooooooood 2 go *puts sunglasses on* ;)

How do I remove the black side bars from my video header youtube link in Wordpress Twenty-Seventeen?

I used the twenty-seventeen customize tool to add an embedded youtube video to my header-media, by only providing a link url.
But it displays with 2 black side bars, on the left and right of the video. From reading other posts, this is how Youtube formatted the video to display. But is there a way to override this somehow?
My work-in-progress website is: www.diatomfilms.com so you can see the problem.
Found this article with quick google search: https://filmora.wondershare.com/youtube-video-editing/remove-youtube-videos-black-bars.html
I guess the fourth solution in the article would be helpful for you because you have already uploaded the video on YouTube.
Click on the Edit button next to the video, and add the most suited
instruction in the Tag bar below:
t:crop=16:9 This tag zooms in on the video because of which the
contents at the borders (black bars in this case) do not appear
anymore.
yt:stretch=16:9 This tag stretches the video in the aspect ratio of
16:9. It is used to view the video in wide-screen format.
yt:stretch=4:3 if your video is appearing in wide-screen format, but
you want it to display in 720 x 480 pixels, apply this tag. It scales
down the video 4:3 aspect.

Black background shows up at the right side of the screen when viewing the page with resized screen

I have search all over the internet and tried for hours to resolve the issue with no avail!
Visit http://testdrupal.ml/node/126 on your mobile device or from your desktop but with resized window to any size... and you will notice a black background will show up at the right side of the screen.
I have tried for hours to play with css and yet the problem not solved!
Can someone please point me to the right css style to be used in order to make this black background disappear ?
Using:
Drupal 8.6.10
Default Bartik theme
An image showing the black background
I want to provide the full css code but the project is private and I can only provide full information with website access in a private chat... I hope someone will be interested!

How to embed fullscreen image into google slides

I want to embed a slideshow that goes from edge to edge of the screen. It would be convenient if I could embed into the header, but it only accepts images, and no embeds or zip files.
It sounds like you want a background image. On the toolbar, select View, then Master. You'll see a 'background' option on the toolbar.

iPad SplitView Master View shows but with minor (and incorrect) variation

I'm practicing development of a simple iPad Split View app (Stanford's Hegarty online class). And everything works for the most part. However, the Master side ('left side), although working in landscape mode looks a little different than what I expect it to as a 'popover' in portrait mode. The 'popover' covers the left side of the screen including the toolbar button item that triggered it where normally it should not cover that button.
Unfortunately I can't post images so I'll try my best to describe in more detail. Normally the 'proper' popover will be hovering right below the bar item button that triggered it with a thick arrow-ish thingie (the 'anchor') pointing to the button and not covering that button. The popover can be dismissed by clicking on that button again (or elsewhere on the screen).
What's happening to me, however, is that when I click the bar item button to show the popover, the resulting popover 'covers' the button and essentially fills up the left portion of the screen (the detail view is under it and most of it is showing) with its designated width (so, again, it doesn't cover the entire detail view). The is no 'anchor' arrow pointing to the bar item button since it is obviously covering it instead. The popover is dismissed normally once I click anywhere else on the screen.
So why is my popover covering the button and not simply hovering under it with an 'anchor' pointing to it as it should?
I don't think it it makes much sense to post code at this point because I don't think it'll help and more importantly not sure what portion to post considering this might be a problem with how I wired it in the Builder. Any thoughts will be greatly appreciated!
Thanks!
Mo
I believe its a change that came in IOS5.1
If you want the same behaviour you probably need to set the master up as a popover segue, from a toolbar button or similar in the detail view, and set the split view delegate to not show the master in portrait.
I'm on the move now but if you want any more info let me know and I'll try and get back to you later.

Resources