I tested lazy loading youtube videos on my site and the page speed improves by 3 seconds. I load a javascript and changed the src attribute for a data-src one.
Ex:
<iframe data-src="http://www.youtube.com/embed/VID" height="360" width="550"></iframe>
But I don't know if the iframe code can be modified and if this goes against Youtubes' terms and conditions: https://www.youtube.com/t/terms.
Related
I am using lazy sizes for the lazy load of my youtube videos. On every page the lazy load does work, but not on these two, more precisely, the whole video just disappears/is not displayed. The two pages are in the same folder as all other pages, which do work. The link to lazysizes.js is there <script src="lazysizes.min.js" async></script>
Here is the iframe on one of the working pages with the video being displayed:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/xxx?rel=0" importance="low" loading="lazy" frameborder="0" class="lazyload" allow="encrypted-media" allowfullscreen></iframe>
and here the iframe that just won't work/does not display the video - it's identical:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/3FOZ2CTaaWk?rel=0" importance="low" loading="lazy" class="lazyload" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
I know this just doesn't make sense, but my hope is that one of you stumbled upon the same problem. I have tried copying and pasting (swapped them, so it is not really the iframe code) and changing it, reloading the js etc. but nothing helps. The iframe is identical with the other pages. I have no idea how to find out what's missing here.
I'm stupid, the console revealed it: the lazysizes.min.js was loaded into the directory of this particular URL. Since this URL (and its /.../ directory) is artificially created the lazysizes.min.js could not be found in that directory (though on the FTP server the js file is in the same directory as the source php file that loads it) it could not be loaded.
A simple line of extra code that includes the lazysizes.min.js above the iframe embedment with an absolute URL to the js file solved the problem!
OK I'm trying to develop a website that includes a youtube playlist. Later it should be possible for every person (in my local network) who visits the website to add songs to this playlist. I will use the youtube-api and probable php or python for this.
Now I've included the playlist via an <iframe> tag and stumbled across a big problem. If I now add more songs to this playlist (over youtube itself), they will of course only be added to the playlist on my website, when I reload the complete website. And if I just reload the div with the <iframe> for example, the problem is that the playlist starts all over again at the first song.
Is there a way I can dynamically update the playlist on my website? So that the playlist does not start again from the beginning, the current playing remains and new added songs are actually added "live" to the playlist?
Here the <iframe> tag if it helps:
<iframe id="playlist" src="https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
A way I suggest is:
(Before updating the div which contains the iframe), you need to get both the current playing video and the current time of the playing video.1
(Once you had added the video to the playlist and get the values I mentioned in the previous lines), update the div element (by modifying the src value of your iframe).
A example could be like this:
You have a playlist which id is: PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2.
The current playing video is: 51iquRYKPbs
When you right-click on the playing video 51iquRYKPbs you'll get the Copy URL video at current time option.
Once selected the Copy URL video at current time option, you'lll get a URL like this:
youtu.be/51iquRYKPbs?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2&t=80
Check the highlighted values - you'll need them for reload your iframe.
Your current iframe src value is as follows:
https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2
(No modifications yet).
For reload the iframe with the applied changes, set your iframe src as follows:
https://www.youtube.com/embed/51iquRYKPbs?list=PLZCHH_4VqpRhMW1K9I1hbgBRmmlWdyK3k&autoplay=1&start=80
(Once you change the src value of your iframe, it will reload with the changes made and it will continue playing the video in the specified time).
The changes made to the src value are explained next:
Set the videoId value of the video which was playing (before complete the reload).
Set the start value of the video for continue playing at the specified time.
the autoplay=1 is needed for play the video at the specified time.
1 About how get the current playing video and the current time of the playing video is a complete new question and it will depend in which language you're handling all the YouTube stuff in your website - (since you mentioned in your question that you will use php or python).
It appears that an update adding widget_referrer was added to the YouTube API on June 12. The CC no longer shows up for my videos and the language in the settings no longer shows up. It works on YouTube correctly, but not in my iframe tag shown (mostly) below.
iframe frameborder="0" width="640" height="360" src="{{ video.url }}" /iframe
(It's django - the video.url reference works fine.)
I've monkeyed with cc_load_policy, origin, and putting something into the widget_referrer with no success. Any suggestions would be greatly appreciated (for example, I just put http:\mydomain.com as the widge_referrer. Should that have www. in it?)
This problem no longer exists. I assume that it was a bug and someone fixed it at YouTube. --thanks--
I have written an article in wordpress and have used google iframe to load country maps of 35 countries. In other words, i am loading 35 iframes of google maps along with 100 other 640px medium size images. The size of the article i wrote is about 31 mb.
It takes about 15 seconds for the article to load, even worse in mobile browsers. Sometimes google maps causes the article content to stop loading for a long time.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5662268.557666768!2d-2.2908874246415487!3d46.135220605972364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54a02933785731%3A0x6bfd3f96c747d9f7!2sFrance!5e0!3m2!1sen!2shu!4v1483719195954" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
How do i speed up the loading? Is there any simple way to do this?
I have used wordpress plugins like lazy load, but it only makes loading even worse and gets stuck. I a supe using supercache for wordpress.
Your code should work. I've tested this and also added a timeout before each frame load so you can see the change.
var URLs = [
'http://localhost/a.htm',
'http://localhost/b.htm',
'http://localhost/c.htm',
'http://localhost/d.htm'
];
function loadNext(){
var frameWindow = document.getElementById('test').contentWindow;
if(URLs.length > 0){
setTimeout(function(){
frameWindow.location.replace(URLs.shift());
}, 1000);
}
}
<iframe id="test" onload="loadNext();"></iframe>
Use the <img> tag instead of <iframe>!
Example:
<img src="https://maps.googleapis.com/maps/api/staticmap?center=London&zoom=13&scale=false&size=600x300&maptype=roadmap&format=png&visual_refresh=true"></img>
Outputs:
Learn more
I think the only solution to load 100 images and 35 iframes is to use Lazy Load.
Lazy load supports iframes and images also. You can try one of free lazy load plugin:
https://wordpress.org/plugins/bj-lazy-load/
I hope it help.
Using SOAP call I am getting a URL and displaying in iframe.That URL contents one form, User need to fill all data and submit it. While I am invoking SOAP function, has given one return link also which one redirecting to my site.But problem is while returning that page is coming inside the iframe. My requirement is pretty clear that it should redirect to given path not inside iframe.
I do appreciate for advance help.
Here is the code for Iframe
<iframe style="width:955px;height:700px;margin: 0px auto;" src="<?php echo $response_data['Url']?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen id="js-signFrame">
</iframe>
If you have control over both the host website and the iframe content you can use easyXDM to transfer messages between the iframe and the site (of course you can use HTML5 socket but easyXDM have a great fallback mechanism which supports older browsers as well).
You can use the message logic to alter window.location of the parent window.
Here is a POC I made to show how to transfer data between different domains without getting caught by browser's same-origin-policy, you can use it as reference.
link:
https://github.com/eitankw/cross-domain