At first I have use video from HTML tag. at time time my google page speed (https://developers.google.com/speed/pagespeed/insights/) is for desktop 95.
E.g:
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="Content/video/RangamOverview.mp4" type="video/mp4">
</video>
After this I have use above same video from youtube. at time time my google page speed (https://developers.google.com/speed/pagespeed/insights/) is for desktop 65.
E.g:
<iframe id="myvideo" height="500" src="https://www.youtube.com/embed/LCDXR1HMUtE?rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="border: 0px; width: 100%; display: block;"></iframe>
Now I want to know how to get high speed with using same youtube video.
This small script helps improving pagespeed because it defers video player loading until the user click the video picture. But then the user needs to click a second time to start the video which is not nice. Trying to find a better solution on the web:
<iframe
width="640"
height="386"
src="https://www.youtube.com/embed/kKCKuMuj1W4?vq=hd1080"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/kKCKuMuj1W4?autoplay=1><img src=https://img.youtube.com/vi/kKCKuMuj1W4/hqdefault.jpg alt='NDepend Dependency Matrix'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen"
title="NDepend Dependency Matrix"
></iframe>
Related
Hey guys hope all well...
I need this code to play inline on iPhone
<iframe width="560" height="300" src="https://yeco.online/VideoPlayer/mix54fm" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;" scrolling="no" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
What do I do here where do I add the variable for inline and what is the varible for inline?
Thx!
David
You need to set playsinline on the <video> element inside the iframe.
I have used the following code to embed a vimeo video on my site:
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/477531257?background=1&autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
How could I redirect the user to the video URL when the user clicks on it?
you can use anchor tag
and give the web address in quotation marks in the href.
if resolves your problem let me know and up vote.
Wrap it in a a tag and put your link in their. like this:
<a href="/yourlink">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/477531257?background=1&autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
</a>
And add pointer-events: none; to your iframe:
iframe { pointer-events: none; }
I am use PlusThis for video tracking and the code below works fine when viewing the desktop version of the site, however, when I use mobile the video is obviously not responsive.
In order to use the PlusThis feature, I need to use the code below and I can't figure out how to make it responsive:
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script type="text/javascript">
PTFeatureBase.setContactId('[memb_contact fields="Id"]');
PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
PTVideoTriggers.listen({
type: "vimeo",
playerId: "vimeo_187399998",
feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
triggerType: "cue",
times: [660]
});
</script>
Could someone please show me how to make this code responsive while still keeping the JavaScript intact that I need in order to use features from PlusThis?
PTFeatureBase.setContactId('[memb_contact fields="Id"]');
PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
PTVideoTriggers.listen({
type: "vimeo",
playerId: "vimeo_187399998",
feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
triggerType: "cue",
times: [660]
});
iframe{
width:100%;
height:auto;
}
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
You used width and height inside iframe tag. So, Please take that iframe tag in a div area and use css iframe as div child. Please follow example below:
HTML code:
<div class="videoiframe">
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS code:
.videoiframe iframe {width:100%; height: auto}
I hope, You got it.
I just copy the embed code from the youtube videos and I need to use the youtube vidoes for advertisements
code from youtube
<iframe width="350" height="260" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
I have edited and updated the code and it looks like this
<div class="video">
<iframe src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
</div>
I have written my CSS and seems it does not have any effect on the Size of the YouTube on web page
CSS
.video{
width:67px;
height:80px;
}
As i increase the size the video stays normal.How to re-size the videos to look big in size?
You want to change the size of the iframe INSIDE the div with class 'video' so:
.video iframe {
width:67px;
height:80px;
}
you have to define class in iframe tag then that css will take effect
<iframe class="video" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
<style>
.video{
width:67px;
height:80px;
</style>
i use an iframe to embed code where there is a youtube player and some html but the problem is that the full screen button is not present on the youtube player.
Iframe used : http://jsfiddle.net/94150148/8rmbv7mk/
<iframe src="http://www.webvideoproduction.fr/v/vga/230415y.html" width="523" height="880" style="border-width: 0; overflow: hidden; width: 100%;"></iframe>
Do you have a solution ?
Thanks
You have to add allowfullscreen in your youtube iframe tag, where your youtube video is embbeded..
Use the following code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/PD8r5A4sonw" frameborder="0" allowfullscreen></iframe>
Hope this helps.
Update
Hi, try this updated code. it worked for me.
<iframe width='420' height='315' src='http://www.youtube.com/embed/PD8r5A4sonw?rel=0&' allowfullscreen ></iframe>