我想将iFrame部分的形状从矩形更改为我自己的自定义形状:
<html>
<body>
<p>dfsdfsdf</p>
<iframe src="http://forum.jquery.com/topic/jquery-mobile-and-iframes-to-load-external-websites">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
我该怎么做?
答案 0 :(得分:1)
iframes
始终是矩形的。没有办法改变它。
一般情况下,您可能希望将透明度,z-index和绝对定位视为可能的解决方法,具体取决于您希望实现的目标。
答案 1 :(得分:0)
我同意iframe通常是常规的,但是您总是可以从某些Java脚本和CSS框架中获取帮助来修改iframe属性。
例如,该学习站点将提供有关如何使用j-query库修改iframe的更多详细信息。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="src/jquery.youtubebackground.js"></script>
````````````````````````````````````````````````````````````````````````````````````````````````````
<div id="video"></div>
$('#video').YTPlayer({
fitToBackground: true,
videoId: 'LSmgKRx5pBo'
});
#video{
position: relative;
background: transparent;
}
.ytplayer-container{
position: absolute;
top: 0;
z-index: -1;
}
任何youtube选项都必须放置在playerVars对象中。
$('#video').YTPlayer({
fitToBackground: true,
videoId: 'LSmgKRx5pBo'
playerVars: {
modestbranding: 0,
autoplay: 1,
controls: 1,
showinfo: 0,
branding: 0,
rel: 0,
autohide: 0,
start: 59
}
});
使用播放器访问所有YouTube API事件和方法:
var player = $('#background-video').data('ytPlayer').player;
player.pauseVideo();
player.playVideo();
player.addEventListener('onStateChange', function(data){
console.log("Player State Change", data);
});
https://github.com/rochestb/jQuery.YoutubeBackground
https://www.learningjquery.com/2016/03/10-jquery-youtube-plugins