Единственный способ заставить этот слайдер работать, это загрузить его локально с официального сайта bxslider. И попробуйте следовать их учебнику о том, как сделать адаптивный видео слайдер. Они нигде не упоминают об этих изображениях стрелок, поскольку они не входят в CSS. Поэтому не забудьте взять папку с изображениями из загруженного zip-архива bxslider и вставить ее в папку js вашего проекта.
В моей последней настройке у меня было 4 локальных файла в папке js: jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js и jquery.fitvids.js. Папка js также включала подпапку images, где были controls.png и bx_loader.gif.
Затем все это упоминалось в файле HTML следующим образом:
<head>
<link rel="stylesheet" href="js/jquery.bxslider.css">
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
video: true,
useCSS: false
});
});
</script>
</head>
<body>
<ul class="bxslider">
<li>
<iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</body>
Я протестировал свое решение на iOS-устройстве, и все, кажется, работает нормально. Существует несколько похожее решение на эту проблему, вы также можете посмотреть на него.