This is my first time posting here and don't really know much about web coding or CSS. I'm a CGI artist who is trying to implement a simple feature. I would like to showcase my Demoreel on my website, figured out how to add the video in, but the position is on the far left of the screen. I'm using Artstation web builder, they don't have an option to implement the video visually. I like to place it in the middle of the screen for the website before showcasing projects since its a built website there are lots of coding and hopping can implement the position code in the middle of without adding in an extra function and such.
I'm using the Firefox Inspector to change the coding when trying to add a position just add a text rather the action on the website.
Any answers regarding to this are very appreciated
Thanks!
<div>
<iframe src="https://www.youtube.com/embed/Ywzukda7WsI" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0">
</iframe>
</div>
What it looks like now on the website
In the iframe, add:
<iframe style='display: block; margin: 0 auto;'>
And that should work.
I tried it on JSFiddle:
https://codepen.io/Rohittt/pen/eQwLYe
you can just copy the code from here or the JSFiddle!
Hope I helped you!
Related
First WTF YouTube!
Second I already tried the &wmode=Opaque and &wmode=transparent.
I don't know what to do, I tried nearly everything and it won't work.....my iframe always is always in front of any object. The weirdest thing is if I open the Chrome Dev-Tools it works and isn't ignoring the z-index but if I try it normal in the browser it doesn't work
<iframe width="560" height="315" src="https://www.youtube.com/embed/LYtxs0ruutM" frameborder="0" allow="accelerometer; autoplay; encrypted-media ;gyroscope; picture-in-picture" allowfullscreen style="--aspect-ratio: 315 / 560;"></iframe>
Thats my iframe....
the aspect-ratio is for the responsivity.
iframe { --video-width: 40vw; width: 40%; height: calc(var(--video-width) * var(--aspect-ratio));box-shadow: 1.5em 1.5em #00000013;}
And thats my CSS-Code
Guys I hope you can help me, im near to go berserk :(
Already thanks for your awnser
i'm developing a website in which i want to show videos from youtube (using the embedded player offered from YT) modifying the frame outside the player.
More specific, i want to create a television img in which, instead of the tv screen, i want to show my videos.
I've tried to create a photo from photoshop cancelling the screen, but then, in HTML, if i choose that img as background-div photo or inserting it as < img src="" />, using z-indexes, i cannot click on the "play" button of my video, because it is covered by the "television" div.
Any Help??
You could slice up your image into a top/left/right/bottom section, and place them around the youtube video (overlaying the edges of the youtube player)
I've mocked up a jsfiddle that uses background-color instead of the sliced up images.
HTML:
<div id="TV">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="playButton">play<div>
</div>
CSS:
#TV{position:absolute;width:500px;height:300px;}
#top{position:absolute;top:0;width:500px;height:20px;background-color:red;}
#left{position:absolute;top:0;left:0;width:20px;height:300px;background-color:red;}
#right{position:absolute;top:0;right:0;width:20px;height:300px;background-color:red;}
#bottom{position:absolute;bottom:0;width:500px;height:20px;background-color:red;}
#playButton{height:100px;width:100px;border-radius:100px;background-color:yellow;left: 200px;position: absolute;top: 90px;}
#playButton:hover{background-color:red;}
I also have an example of this in action, where you would draw on the canvas in the middle of the "frame" images. Here
The only caveat is that you need to use fixed heights and widths, and absolute positions.
This is a code html with it you can insert a YT video
<iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Is it possible to add "sub-text" to an iframe? For example I have the following code...
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/apkRBANIKxc" frameborder="0" allowfullscreen></iframe>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/h7ArUgxtlJs" frameborder="0" allowfullscreen></iframe>
And I want to be able to add some text beneath that explains in detail the video etc, but whenever I've used a simple tag within or just outside of the iframe, it treats it as if the iframe isn't present and the text always appears at the top of the page instead of beneath the iframe. Maybe I need to embed this video in some other way other than an iframe in order to be able to use text along with it?
I'm not sure what isn't working for you, maybe your CSS is messing it up?
I was able to use the iframes of the videos and add a little description to them. Here is a sample, it's also on jsFiddle
<div>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/apkRBANIKxc" frameborder="0" allowfullscreen></iframe>
<p>Pharoahe Monch Simon Says (Avicii Remix)</p>
</div>
<div>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/h7ArUgxtlJs" frameborder="0" allowfullscreen></iframe>
<p>deadmau5 feat. Rob Swire - Ghosts N Stuff</p>
</div>
I am using iframe you-tube video in my website.
Sample Code:
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
If I click the youtube video it will redirect to the external page. I used the below code.
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
I know my way is wrong. It is not working. Please confirm to do this in anyway?
This will not work. To solve your problem you have to use javascript. For reference you can check following thread
Detect Click into Iframe using JavaScript
Another Solution is
<div style="position:relative">
<div style="position:absolute;width:414px;height:270px" onclick='window.location.href="http://google.com"' ></div>
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
</div>
Here I superimposed another div overiframe (we will not set any background for it, so iframe content will be seen) which will have onclick function which will take user to desired url
I am using youtubes new iframe code to embed video but the videos seem to be lower quality than if I watch them on youtube. Is there a way to embed the high quality video?
My code at the moment is
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY" frameborder="0" allowfullscreen></iframe>
&vq=hd720 or &vq=hd1080 did the trick where all else failed
The following code did the trick for me:
<iframe width="241" height="136" src="https://www.youtube.com/embed/NMG0CMkuUnA?version=3&vq=hd720" frameborder="0" allowfullscreen></iframe>
Try this for specific quality of video..
144p : &vq=tiny
240p : &vq=small
360p : &vq=medium
480p : &vq=large
720p : &vq=hd720
example :
<iframe width="320" height="350" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1&vq=tiny" frameborder="0"
allowfullscreen></iframe>
Also, it seems that YouTube now automatically serves up the quality that it thinks is optimized for the size of the embed, for iframe and AS3, regardless of whether or not the HD parameter is set.
See this post, and this for more information.
UPDATE: See Jason Renaud's answer for a good method that allows explicitly forcing the quality type. I tried it with an HTML5-embedded player, and it worked as expected.
It seems that the answer changes with time.
To look at the meta of what is going on, it seems that there are two generalities to the desired effect.
1) You can try and 'hack' the iframe code itself.
2) You can try and create a container to trick the iframe into thinking it should display HD.
Let's do both.
[ SPECIFIC IFRAME CODE]
You can possibly edit the typical embed youtube iframe link using current standards. I would recommend using a base size that would demand that size anyways and proceeding with step two to resize it.
Look up a current listing such as the one on h3xed to see the way youtube calls the files when embedded.
Of note, I didn't find the following code anywhere, I discovered it. I need to call videos that are 720. I was looking for the answer to this question and when viewing the file I noted that it said 720p60 as the actual youtube setting.
So I altered what seems to have worked before and sure enough...
<div class="responsive-container" >
<iframe width="780" height="480"
src="https://www.youtube.com/embed/DFzUdTUaAr4?rel=0&vq=hd720p60" frameborder="0" allowfullscreen></iframe>
</div>
worked.
Note that essentially I added ?rel=0&vq=hd720p60
And made the iframe size large enough to demand hd.
[ CREATING A CONTAINER ]
This works because you are asking youtube for a higher quality video and then going behind it's back and resizing it to fit the space you desire. Although you directly ask how to embed, I'm assuming you're asking to embed whenever and wherever you want - not being restricted to giant videos on page for high quality files.
A simple responsive container works well since iframes are made to be controlled through CSS. Using code similar to that found on thenewcode's Force-Embedded-Youtube-Videos-To-Play-In-HD article we create a code that restricts the aspect ratio to a limited size.
.responsive-container {
position: relative;
padding-bottom: 53.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container,
.responsive-container iframe {
max-width: 1280px;
max-height: 720px;
}
.responsive-container iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
*Of note: 'Legacy' code of &fmt=35, &fmt=22, or &fmt=37 works at this point for video links. The youtube video opens up at this specific quality.
Also note that you also have to notice a difference in tdl between youtube videos and embedded videos. They are (from my experience) not cross compatible. * (youtube.com/embeded... VS youtu.be/...)
Oh I've found it now you have to put ?vq=hd720 on the end of the url like so:
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY?vq=hd720" frameborder="0" allowfullscreen></iframe>