自定义iframe形状

时间:2012-05-17 06:00:25

标签: iframe

我想将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>

我该怎么做?

2 个答案:

答案 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'
});

需要自定义一些CSS以使其成为背景

#video{
position: relative;
background: transparent;
}

.ytplayer-container{
 position: absolute;
 top: 0;
 z-index: -1;
}

使用Youtube Javascript API

Youtube Javascript API选项

任何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