Hello, I'm trying to use the carousel dynamically, changing when the url is selected. But after clicking the main iframe it changes and displays the following message: "Maybe it has been moved or deleted"
The bridge
<body>
<header>
</header>
<section>
<div id="videos" class="container" style="margin-top:10px">
<h2>Principais vídeos</h2>
<hr>
<iframe src="https://player.vimeo.com/video/257707149"></iframe><divclass="row thumbnails owl-carousel owl-theme">
<div class="items" href="https://player.vimeo.com/video/220823786">
<div class="item-inner">
<img src="imagem/lucas.jpg" alt="Video">
<h3>Clipe musical</h3>
</div>
</div>
<div class="items" href="https://player.vimeo.com/video/254645625">
<div class="item-inner">
<img src="imagem/fashion.jpg" alt="Video">
<h3>Fashion Video</h3>
</div>
</div>
<div class="items" href="https://player.vimeo.com/video/257707149">
<div class="item-inner">
<img src="imagem/cah.jpg" alt="Video">
<h3>Fashion Video</h3>
</div>
</div>
<div class="items" href="https://player.vimeo.com/video/256980858">
<div class="item-inner">
<img src="imagem/salvando.jpg" alt="Video">
<h3>Clipe musical</h3>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="jquery\jquery.min.js"></script>
<script src="OwlCarousel/dist/owl.carousel.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
<script src="js\efeitos.js"></script>
<script>
$(function(){
$(".thumbnails .items").on("click", function(){
$("iframe").attr("src",+$(this).attr("href"));
});
});
</script>
</body>