I'm making a section in which you click on a and a Youtube video <a>
opens . iframe
I have 30 <a>
that make 30 different iframes which show different videos, when executing this page it takes a long time to load, how could I decrease the page load time?
This would be the code:
< data-toggle="modal" data-target="#1"> 1. Gangnan Style | | <strong>PSY </strong> </><br>
<div class="modal fade" id="1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Gangnan Style | | <strong>PSY </strong></h4>
</div>
<div class="modal-body">
<iframe width="99%" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0?controls=0"> </iframe>
</div>
</div>
</div>
</div>
You could leave the iframes without assigning the src attribute and assign it at the moment of showing the video in question (when the user clicks to show it). This would speed up the initial load, although it would take longer to display a specific video.
Another option is to assign all the urls of the videos once the rest of the page has finished loading. Something like that: