Music iframe do not follow the given width.

[gapplef]

I agree and want to create new issue

• Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• Yes, I was on NexT Documentation Site.
• And yes, I already searched for current issues and this is not help to me.

---

I use the follow code to insert music iframe, and set width=330 height=450.

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450
src="//music.163.com/outchain/player?type=0&id=739576121&auto=1&height=430"></iframe>

Expected behavior

This is the result with theme tranquilpeak, the width of music iframe is as expected.

Actual behavior

When use theme next, the music iframe seems fit to the content width, and is much wider than the requirement.

[sli1989]

It can be controlled by the music iframe code.

<iframe frameborder="0" width="100%" height="100" src="http://v.qq.com/iframe/player.html?vid=m0178qd1etl&tiny=0&auto=0" allowfullscreen></iframe>

[gapplef]

@sli1989 I think you misunderstand my problem.
I set the width of iframe to 330px, but the result is that it take the full width, which is not what I expected.
And this only happened for next theme, not others like tranquilpeak.
Also this only happend for music iframe, not videos.

[maple3142]

Maybe you need quote in html attributes.

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="450"
src="//music.163.com/outchain/player?type=0&id=739576121&auto=1&height=430"></iframe>

[gapplef]

@maple3142 Actually, that's the default iframe code of NetEase Music, and after add quote, the result is still unchange.
Also I want to emphasise again that this only happened for next theme, not others like tranquilpeak in my test. That's why I think it's a bug of `next.

[ivan-nginx]

@gapplef othe NexT schemes like Muse still have same bug?

[gapplef]

@ivan-nginx yes, all have the same problem.

[stevenjoezhang]

In source/js/src/utils.js, remove

hexo-theme-next/source/js/src/utils.js

Lines 164 to 171 in 32d4a26

	// Replace the iframe's dimensions and position the iframe absolute
	// This is the trick to emulate the video ratio
	$iframe.width('100%').height('100%')
	.css({
	position: 'absolute',
	top : '0',
	left : '0'
	});

will solve the problem.
It seems to be a feature rather than a bug 🤔
See: iissnan/hexo-theme-next@ccc18c7#diff-a85f8cc577970acb809c7250f9ae27e2

[ivan-nginx]

Maybe we can add option for 100% width or not here.
Let's add feature request on this issue.

[stevenjoezhang]

@gapplef iframe of origin music.163.com will no longer be resized automatically now.

[gapplef]

@stevenjoezhang thanks a lot.